如何在填充 fabricjs 之前缩放图案

Question

我正在尝试用大于多边形本身的图案填充多边形。我想在用它填充多边形之前缩小图案，但我不知道该怎么做。我当然可以在加载文件模式文件之前调整它的大小，但我想知道我是否可以直接在 fabricjs 中这样做。

这是我正在尝试的：

var leftStickPoints = [{x: 0, y: 0},{x: 86, y: 86},{x: 86, y: 441},{x: 0, y: 528}];
var leftStick = new fabric.Polygon(leftStickPoints, {
    left: 20,
    top: 20,
    fill: 'orange',
});
canvas.add(leftStick);

fabric.util.loadImage(patternURL, function (img) {
    // ------
    // pattern scale down should happen here I think but I cannot figure out how to manipulate the `img` param in order to do so
    // ------
    leftStick.fill = new fabric.Pattern({
        source: img,
        repeat: 'repeat-y'
    });
    canvas.renderAll();
});

对如何在应用模式之前缩放模式有任何想法吗？

谢谢！

Answer 1

我给你做了一个jsFiddle based on http://fabricjs.com/dynamic-patterns/例子。您可以将图像缩放到 img.scaleToWidth(200); 的某个宽度。您现在可以使用它来完成您需要的工作。

如何在填充 fabricjs 之前缩放图案

How to scale a pattern before fill in fabricjs

html

image

image-processing

html5-canvas

fabricjs