防止Fabric JS对象可见边界
问题描述:
我有2个矩形。当小矩形移动到较大矩形的外部时,我希望边界外的小矩形区域不可见。防止Fabric JS对象可见边界
如果小矩形的一半在里面,一半在外面。然后只有一半可见,这example这样工作。
我该如何做到这一点?
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
fabric.Object.prototype.transparentCorners = false;
// create a rectangle with a fill and a different color stroke
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 150,
height: 250,
fill: 'transparent',
stroke: 'rgba(34,177,76,1)',
strokeWidth: 1
});
var rect2 = new fabric.Rect({
left: 50,
top: 50,
width: 50,
height: 50,
fill: 'rgba(34,50,100,1)',
stroke: 'rgba(34,177,76,1)',
strokeWidth: 1
});
canvas.add(rect);
canvas.add(rect2);
})();
例这里可与这样:
答
这可能通过以下方式来实现,用一个额外的库调用lodash
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
fabric.Object.prototype.transparentCorners = false;
// create a rectangle with a fill and a different color stroke
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 150,
height: 250,
fill: 'transparent',
stroke: 'rgba(34,177,76,1)',
strokeWidth: 1
});
var rect2 = new fabric.Rect({
left: 50,
top: 50,
width: 50,
height: 50,
fill: 'rgba(34,50,100,1)',
stroke: 'rgba(34,177,76,1)',
strokeWidth: 1,
clipName: 'rect2',
clipTo: function(ctx) {
return _.bind(clip, rect2)(ctx)
}
});
function d2R(deg) {
return deg * (Math.PI/180);
}
function clip_name(name) {
return _(canvas.getObjects()).where({
clipFor: name
}).first()
}
function clip(ctx) {
this.setCoords();
var clipObj = clip_name(this.clipName);
var scaleXTo1 = (1/this.scaleX);
var scaleYTo1 = (1/this.scaleY);
ctx.save();
var ctxLeft = -(this.width/2) + clipObj.strokeWidth;
var ctxTop = -(this.height/2) + clipObj.strokeWidth;
var ctxWidth = clipObj.width - clipObj.strokeWidth;
var ctxHeight = clipObj.height - clipObj.strokeWidth;
ctx.translate(ctxLeft, ctxTop);
ctx.scale(scaleXTo1, scaleYTo1);
ctx.rotate(d2R(this.angle * -1));
ctx.beginPath();
ctx.rect(clipObj.left - this.oCoords.tl.x, clipObj.top - this.oCoords.tl.y, clipObj.width, clipObj.height);
ctx.closePath();
ctx.restore();
}
rect.set({
clipFor: 'rect2'
});
canvas.add(rect);
canvas.add(rect2);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script>
<canvas id="canvas" width="800" height="600"></canvas>
@ moáois不,我会用1.7.9实际上,我会更新jsfiddle – HOY