我想根据删除图像的 svg 路径在画布上剪辑图像。看到我在这里做的页面, http: //qa.newagesme.com/wyz_editor/clip.php
在这里,我可以将图像从左侧拖放到画布上,它实际上会根据路径剪辑画布,但现在画布的所有其他部分都不可见,我不想发生这种情况,其他区域也应该是可见的,并且应该在放置它的路径内掩盖图像,下面给出了部分代码,
jQuery('#editor').droppable({accept: ".ui-draggable",drop: function( event, ui ) {
topmost = undefined;
var canvasContainer = jQuery("#editor"),
canvasX = event.pageX - canvasContainer.offset().left,
canvasY = event.pageY - canvasContainer.offset().top;
canvasX = canvasX < 0 ? 0 : canvasX;
canvasY = canvasY < 0 ? 0 : canvasY;
// alert(canvasX+'px'+canvasY+'px');
var position = new Object({'x': canvasX, 'y': canvasY});
jQuery.each(objs,function(index,val){
if( val.containsPoint(position) && !(editor.isTargetTransparent(val, canvasX, canvasY)) ){ // checking if the image dropped on the path visible area
topmost = val; //to get the top most item only
}
});
if(topmost != undefined){
var Img1 = new Image();
Img1.onload = function (img) {
//var attr = proportionalHeight(val,this);
var Image1 = new fabric.Image(Img1, {
height: 150,
width:150,
left: canvasX,
lockUniScaling:true,
minScaleLimit:.3,
top: canvasY,
clipName: topmost.get("clipFor"),
scaleX: 0.7,
scaleY: 0.7,
});
var cont = editor.getContext("2d");
cont.save();
editor.clipTo=function(ctx){
//ctx.save();
topmost.render(ctx);
ctx.clip();
//return _.bind(clipByName, Image1)(ctx)
}
cont.restore();
editor.add(Image1);
editor.renderAll();
};
Img1.src = 'http://192.168.1.254/robin/wyz_editor/'+ui.draggable.find('img').attr('src');
}
如果您查看我在上面提供的链接,您会看到图像被正确剪切,但画布上的所有其他项目也被剪切掉。