Как поместить холст в холст?

Question

Я просто хочу знать, что является лучшим способом использовать несколько холстов на одной странице. Эти холсты могут перекрываться друг с другом.

Я попытался найти эту проблему в другой форме, но не смог найти полезный материал. Это то, что мы действительно хотим сделать (на следующем рисунке). Есть 5 полотен, и мы хотим, чтобы все они были полностью функциональными. Мы можем добавлять изображения, текст и рисовать разные вещи на выбранном холсте.

В настоящее время мы используем fabricjs.

Если это невозможно, то каково наилучшее решение для достижения чего-то подобного?

Заранее благодарен!

Answer 1

Просто используйте CSS для этого.

<div class="wrapper"> 
<canvas id="background_layer" class="canvas-layer" width="100" height="100"></canvas> 
<canvas id="other_layer" class="canvas-layer" width="100" height="100"></canvas> 
</div> 

<style> 
    .wrapper { position: relative } 
    .canvas-layer { 
     position: absolute; left: 0; top: 0; 
    } 
</style> 

Answer 2

Я не уверен, что вы пытаетесь достичь, но вы можете обратиться к этому Fiddle http://jsfiddle.net/PromInc/ZxYCP/

var img01URL = 'https://www.google.com/images/srpr/logo4w.png'; 
var img02URL = 'http://fabricjs.com/lib/pug.jpg'; 

var canvas = new fabric.Canvas('c'); 

// Note the use of the `originX` and `originY` properties, which we set 
// to 'left' and 'top', respectively. This makes the math in the `clipTo` 
// functions a little bit more straight-forward. 
var clipRect1 = new fabric.Rect({ 
    originX: 'left', 
    originY: 'top', 
    left: 180, 
    top: 10, 
    width: 200, 
    height: 200, 
    fill: '#DDD', /* use transparent for no fill */ 
    strokeWidth: 0, 
    selectable: false 
}); 
// We give these `Rect` objects a name property so the `clipTo` functions can 
// find the one by which they want to be clipped. 
clipRect1.set({ 
    clipFor: 'pug' 
}); 
canvas.add(clipRect1); 

var clipRect2 = new fabric.Rect({ 
    originX: 'left', 
    originY: 'top', 
    left: 10, 
    top: 10, 
    width: 150, 
    height: 150, 
    fill: '#DDD', /* use transparent for no fill */ 
    strokeWidth: 0, 
    selectable: false 
}); 
// We give these `Rect` objects a name property so the `clipTo` functions can 
// find the one by which they want to be clipped. 
clipRect2.set({ 
    clipFor: 'logo' 
}); 
canvas.add(clipRect2); 

function findByClipName(name) { 
    return _(canvas.getObjects()).where({ 
      clipFor: name 
     }).first() 
} 

// Since the `angle` property of the Image object is stored 
// in degrees, we'll use this to convert it to radians. 
function degToRad(degrees) { 
    return degrees * (Math.PI/180); 
} 

var clipByName = function (ctx) { 
    this.setCoords(); 
    var clipRect = findByClipName(this.clipName); 
    var scaleXTo1 = (1/this.scaleX); 
    var scaleYTo1 = (1/this.scaleY); 
    ctx.save(); 

    var ctxLeft = -(this.width/2) + clipRect.strokeWidth; 
     var ctxTop = -(this.height/2) + clipRect.strokeWidth; 
     var ctxWidth = clipRect.width - clipRect.strokeWidth; 
     var ctxHeight = clipRect.height - clipRect.strokeWidth; 

    ctx.translate(ctxLeft, ctxTop); 

    ctx.rotate(degToRad(this.angle * -1)); 
    ctx.scale(scaleXTo1, scaleYTo1); 
    ctx.beginPath(); 
    ctx.rect(
     clipRect.left - this.oCoords.tl.x, 
     clipRect.top - this.oCoords.tl.y, 
     clipRect.width, 
     clipRect.height 
    ); 
    ctx.closePath(); 
    ctx.restore(); 
} 

var pugImg = new Image(); 
pugImg.onload = function (img) {  
    var pug = new fabric.Image(pugImg, { 
     angle: 45, 
     width: 500, 
     height: 500, 
     left: 230, 
     top: 50, 
     scaleX: 0.3, 
     scaleY: 0.3, 
     clipName: 'pug', 
     clipTo: function(ctx) { 
      return _.bind(clipByName, pug)(ctx) 
     } 
    }); 
    canvas.add(pug); 
}; 
pugImg.src = img02URL; 

var logoImg = new Image(); 
logoImg.onload = function (img) {  
    var logo = new fabric.Image(logoImg, { 
     angle: 0, 
     width: 550, 
     height: 190, 
     left: 50, 
     top: 50, 
     scaleX: 0.25, 
     scaleY: 0.25, 
     clipName: 'logo', 
     clipTo: function(ctx) { 
      return _.bind(clipByName, logo)(ctx) 
     } 
    }); 
    canvas.add(logo); 
}; 
logoImg.src = img01URL; 

Я надеюсь, что это может помочь.