Question

这里有点沮丧。我试图让动态模式工作，因为它在演示http://fabricjs.com/dynamic-patterns上显示。

我编写了函数但是一旦创建t就不会改变模式大小。

我尝试将img对象分配给窗口数组并更改大小，甚至在函数末尾插入了rescale操作，但我的模式仍然不会改变它的大小。

我知道我做错了什么，但我无法弄清楚是什么。也许它是Fabric.js版本或canvas.requestRenderAll（）;

如果你对如何处理这个问题有任何想法，请告诉我。

这是代码。

        'setBackgroundItem':function(){

        fabric.Image.fromURL(arr.image, function(img) {

            var patternSourceCanvas = new fabric.StaticCanvas();

            var to_set_width = canvas.getActiveObject().width; // avtorkoda

            img.set({opacity: 0.9});
            img.scaleToWidth(to_set_width);

            w.fills.push(img);

            patternSourceCanvas.add(img);
            patternSourceCanvas.setDimensions({
                width: to_set_width,// на ноуте клиента работает с этим. у меня без может)
                height: Math.floor(to_set_width)
            });


            var texture = patternSourceCanvas.getElement();

            var pattern = new fabric.Pattern({
                source: texture,
                repeat: 'no-repeat',
                offsetX: 0,
                offsetY: 0
            });

            var activeObject =  canvas.getActiveObject();
            var activeGroup  =  canvas.getActiveGroup();

            activeObject.setFill(pattern);


            img.scaleToHeight(40);

            canvas.renderAll();
        });
    },

提前致谢。

Answer 1

聚会晚点：

文档中没有指定此格式，但是要在应用样式后更改样式宽度，必须在应用样式的对象上禁用缓存。

在您的情况下：

activeObject.set('objectCaching', false);

另一个可以观察到它的地方（来自FabricJS自己的example here）：

canvas.add(new fabric.Polygon([
  {x: 185, y: 0},
  {x: 250, y: 100},
  {x: 385, y: 170},
  {x: 0, y: 245} ], {
    left: 0,
    top: 200,
    angle: -30,
    fill: pattern,
    objectCaching: false
  }));

您可以这样操作，也可以将objectCaching设置为所有对象的默认设置（not recommeded for heavy projects）

Fabric.js。动态模式不起作用

1 个答案: