如何在填充fabricjs之前缩放模式

时间:2015-06-08 16:39:54

标签: html5 image image-processing html5-canvas fabricjs

我尝试使用大于多边形本身的图案填充多边形。我想在填充多边形之前缩小模式,但我无法弄清楚如何。我可以在加载之前调整文件模式文件的大小,但我想知道我是否可以直接在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();
});

在应用之前如何扩展模式的任何想法?

谢谢!

1 个答案:

答案 0 :(得分:2)

我根据jsFiddle示例为您制作了http://fabricjs.com/dynamic-patterns/。您可以将图像缩放到img.scaleToWidth(200);的特定宽度。您现在可以使用它来完成您的需要。