Question

我想根据放置图像的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');


    }

如果您查看我上面提供的链接，您会看到图片正确剪裁，但画布上的所有其他项目也会被剪掉。

Canvas clipTo方法恢复已清除的区域

0 个答案: