gpt4 book ai didi

javascript - Fabric .js : clip everything but overlay image

转载 作者:行者123 更新时间:2023-11-30 16:26:26 25 4
gpt4 key购买 nike

我在 js fiddle 上的代码: http://jsfiddle.net/tbqrn/170/

var img02URL = 'http://fabricjs.com/lib/pug.jpg';

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

//frame image, should be displayed fully.
canvas.setOverlayImage('http://cdn.1001freedownloads.com/vector/thumb/107559/Pink_Hearts_Frame.png', canvas.renderAll.bind(canvas), {
width: canvas.width,
height: canvas.height
});
canvas.selection = false;

//rectangle that hides everithing around it.
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(50,50,300,300);
ctx.closePath();
ctx.stroke();
ctx.clip();

//the image that should stay inside the frame
fabric.Image.fromURL(img02URL, function(oImg) {
oImg.scale(.25);
oImg.left = 140;
oImg.top = 140;
canvas.add(oImg);
canvas.renderAll();
});

在我当前的方法中,矩形周围的所有内容都被隐藏,甚至覆盖图像。我想隐藏除叠加图像以外的所有内容,以便完全显示框架。我该怎么做?

最佳答案

只需让 fabricJs 为您管理剪辑。叠加图像在 fabricjs 渲染堆栈中的裁剪之上。

当使用 fabricjs 时,不要直接访问上下文,而是使用 fabricjs 方法访问它。使用 canvas.clipTo = function(_2dContext){} 管理您的剪裁。

var img02URL = 'http://fabricjs.com/lib/pug.jpg';

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

//frame image, should be displayed fully.
canvas.setOverlayImage('http://cdn.1001freedownloads.com/vector/thumb/107559/Pink_Hearts_Frame.png', canvas.renderAll.bind(canvas), {
width: canvas.width,
height: canvas.height
});
canvas.selection = false;

//rectangle that hides everithing around it.
canvas.clipTo = function(ctx) {
ctx.rect(50,50,300,300);
ctx.closePath();
};


//the image that should stay inside the frame
fabric.Image.fromURL(img02URL, function(oImg) {
oImg.scale(.25);
oImg.left = 140;
oImg.top = 140;
canvas.add(oImg);
canvas.renderAll();
});
<script src="http://www.deltalink.it/andreab/fabric/fabric.js" ></script>
<canvas id="canvas" width=400 height=400 style="height:500px;width:500px;"></canvas>

关于javascript - Fabric .js : clip everything but overlay image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34084243/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com