fillPattern 在路径节点上的意外定位

Question

我注意到，当我创建一个矩形并将其 fillPattern 设置为某个图像时，填充从矩形的左上角开始。

function addRectangle() {
    window.rect = new Konva.Rect({
        width: 400,
        height: 400,
        x: 200,
        y: 200,
        stroke: 'grey',
        strokeWidth: 1,
        fillPatternRepeat: 'no-repeat',
    });
    const img = new Image();
    img.src = imageSource;
    img.onload = function() {
        rect.fillPatternImage(img);
        firstLayer.add(rect);
    }
}

但是当我将 fillPattern 添加到 Path 节点（该节点具有数据属性，使其在视觉上与上面相同的矩形中）时， fillPattern 从某个全局坐标系的 (0,0) 开始，而不是在我的 Path 的左上角节点。

function addPath() {
    window.path = new Konva.Path({
        data: 'M 200 200 L 600 200 L 600 600 L 200 600 Z',
        stroke: 'grey',
        strokeWidth: 1,
        fillPatternRepeat: 'no-repeat',
    })
    const img = new Image();
    img.src = imageSource;
    img.onload = function() {
        path.fillPatternImage(img);
        firstLayer.add(path);
    }
}

图案图像是一个 300 x 300 的黑色正方形。

const imageSource = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAIAAAD2HxkiAAABHUlEQVR4nO3BAQ0AAADCoPdPbQ43oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAnAyAYAAFGw74oAAAAAElFTkSuQmCC";

我是否正确理解这是由从全局 (0,0) 而不是本地 (0,0) 绘制的路径填充引起的？这是预期行为还是错误？有没有一种简单的方法可以解释这个问题？我正在使用 konva v8.3.2。

Answer 1

Konva.Path 实际上有自己的原点，并且路径是相对于该原点绘制的。在路径的实例化中，您不指定路径原点。

    window.path = new Konva.Path({
        data: 'M 200 200 L 600 200 L 600 600 L 200 600 Z',
        stroke: 'grey',
        strokeWidth: 1,
        fillPatternRepeat: 'no-repeat',
    })

请修改为

    window.path = new Konva.Path({
        x: 200, y: 200,   // <<<< note the x and y
        data: 'M 200 200 L 600 200 L 600 600 L 200 600 Z',
        stroke: 'grey',
        strokeWidth: 1,
        fillPatternRepeat: 'no-repeat',
    })

并相应地调整您的路径数据。