Question

我只想知道在单个页面中使用多个画布的最佳方法是什么。这些画布可以相互重叠。

我尝试以不同的形式搜索此问题，但无法找到任何有用的资料。这就是我们实际想要做的事情（如下图所示）。有5幅画布，我们希望它们全部功能齐全。我们可以在选定的画布上添加图像，文本和绘制不同的东西。

我们目前正在使用fabricjs。 enter image description here

如果那是不可能的，那么实现这样的目标的最佳解决方案是什么？

提前致谢！

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

我不确定你想要达到的目的但你可以参考这个小提琴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;

我希望这可能有所帮助。

如何在画布中放置画布？

2 个答案: