Fabric.js-使用patternTransform

时间:2019-01-25 15:29:28

标签: javascript html5-canvas fabricjs

我发现有些奇怪的东西。我正在努力转换fabric.Text对象上的模式。我为这样的对象创建模式:

fabric.util.loadImage(path, (img) => {
    this.object.fill = new fabric.Pattern({source:img}, () => {
        this.object.dirty = true
        canvas.renderAll()
    })
})

看起来不错。我可以更改fill.offsetXfill.offsetY,它的工作方式与例外类似:

pattern fill

对于变换模式,当可以为比例等设置变换矩阵时,我使用fill.patternTransform。当我使用矩阵减小模式的比例时:

this.object.fill.transformMatrix = [.77, 0, 0, .77, 0, 0]

事情变得有趣:

wrong pattern fill

当我对其他对象(路径,矩形,圆形等)应用相同的模式时,不会发生这种情况。我可以正确缩放图案:

correct pattern fill on circle

我不想使用fabric.js示例中提供的DynamicPattern方法,因为我需要fill.patternTransform转换矩阵以备将来使用。

有什么想法吗?

有效的jsfiddle示例:jsfiddle

我正在使用 fabric@2.6.0

0 个答案:

没有答案