我在js小提琴上的代码:
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>