Konva中Path节点填充图案定位异常问题咨询

我最近在使用Konva v8.3.2开发时，遇到了一个填充图案定位的奇怪问题，想和大家请教一下：

正常的Rect节点表现 #

当我创建一个Konva.Rect节点，设置位置在(200,200)、尺寸400x400，并给它添加不重复的填充图案时，图案会从Rect的左上角（也就是节点自身的x、y位置）开始填充，完全符合预期：

对应的代码如下：

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);
    }
}

异常的Path节点表现 #

但当我用Konva.Path节点，通过data属性绘制出视觉上完全相同的矩形（路径指令是M 200 200 L 600 200 L 600 600 L 200 600 Z），再设置同样的填充图案时，发现填充图案并不是从Path的左上角开始，而是从全局坐标系的(0,0)位置开始，导致图案偏移了200px（正好是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);
    }
}

这里用的填充图案是一张300x300的黑色正方形，图片源是：

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

我的疑问 #

我猜测这是因为Path节点的填充图案是基于全局坐标系，而不是节点自身的局部坐标系？这是Konva的预期行为还是一个bug？有没有简单的办法可以让Path的填充图案和Rect一样，对齐到自身的左上角？

补充：问题的原因与解决办法 #

后来我查了Konva文档并和其他开发者交流后，搞清楚了问题的根源和解决方法：

原因分析

这是Konva的预期行为，核心差异在于两个节点的坐标体系设计：

• Konva.Rect通过x、y属性定义自身在画布中的位置，内部绘制基于自身局部坐标系（以节点的x、y为局部原点），所以填充图案会自动对齐这个局部原点。
• Konva.Path的data属性直接使用全局坐标系的路径指令绘图，它自身的x、y默认值为(0,0)，因此填充图案会以全局(0,0)为原点，而非Path图形的视觉左上角。

推荐解决方法

有两种可行方案，更推荐第一种：

方案1：调整Path的坐标定义方式

把Path的data改成基于局部(0,0)的路径，再用x、y属性定位Path位置，这样填充图案会自动对齐Path左上角，和Rect逻辑保持一致：

function addPath() {
    window.path = new Konva.Path({
        x: 200,
        y: 200,
        data: 'M 0 0 L 400 0 L 400 400 L 0 400 Z', // 基于局部(0,0)的矩形路径
        stroke: 'grey',
        strokeWidth: 1,
        fillPatternRepeat: 'no-repeat',
    })
    const img = new Image();
    img.src = imageSource;
    img.onload = function() {
        path.fillPatternImage(img);
        firstLayer.add(path);
    }
}

方案2：手动设置填充图案偏移量

如果不想修改Path的data内容，可以通过fillPatternOffset属性补偿全局坐标偏移，偏移量设为Path图形的左上角坐标即可：

img.onload = function() {
    path.fillPatternImage(img);
    // 偏移量设置为Path图形的起始坐标，抵消全局原点的偏移
    path.fillPatternOffset({x: 200, y: 200});
    firstLayer.add(path);
}

备注：内容来源于stack exchange，提问作者Scruffy