Question

我正在使用面料js进行设计，我有svg图像，具有不同的形状，如圆形，方形。现在我必须将背景图像应用于svg。但是用户可以缩放该图像，以便只将所需的图像部分设置为背景。请检查附件。我有svg的圆形图像，以及杯形蛋糕作为背景。

Right now upload png but I have same svg

现在我想说我只想把部分作为背景，所以我想缩放背景图像。这可能吗？

setPattern: function(currentElement,url,width,left_offset,top_offset,angle,padding,isrepeat){ 

        if(width === "undefined" || width == 100) { width = 100; } else { width = width ;} 
        if(left_offset === "undefined" || !left_offset){ left_offset = 0; } else { left_offset = left_offset } ;//left_offset;
        if(top_offset === "undefined" || !top_offset) { top_offset = 0; } else { top_offset = top_offset; }//top_offset;
        if(angle === "undefined" || !angle) { angle = 0; } else{ angle = angle; }
        if(padding === "undefined" || !padding){ padding = 0; } else {padding = padding;}
        if(!isrepeat){ isrepeat = 'no-repeat'; }

        fabric.Image.fromURL(url,function(img){
            img.scaleToWidth(width);
            //if (angle > 0) img.set('angle', angle);
            //if(padding > 0) padding = (padding,10);
            var patternSourceCanvas = new fabric.StaticCanvas();
            patternSourceCanvas.add(img);
            patternSourceCanvas.renderAll();
            var pattern = new fabric.Pattern({
                source: function() {
                    patternSourceCanvas.setDimensions({
                        width:img.getWidth() + padding,
                        height:img.getHeight() + padding
                    });
                    patternSourceCanvas.renderAll();
                    return patternSourceCanvas.getElement();
                },
                repeat: isrepeat,
                src: url,
            });

            if(left_offset > 0) { pattern.offsetX = (left_offset, 10); } else{ pattern.offsetX = 0;}
            if(top_offset > 0) { pattern.offsetY = (top_offset, 10); } else { pattern.offsetY = 0;}
            currentElement.paths[0].setFill(pattern);
            //currentElement.bringToFront();
            canvas.renderAll();
        });
    }

将可缩放的背景图像设置为织物js中的svg图像

0 个答案: