Javascript KineticJS：如何防止图像与笔划重叠？

我有一个在KineticJS层中的图像。当我设置宽度大于1的笔划时，图像将在某些点与笔划重叠。这是我做的一个例子：

此图显示了问题：

我的代码：

var stage = new Kinetic.Stage({
    container: 'container',
    width: 800,
    height: 900
});
var layer = new Kinetic.Layer();

var imageObj = new Image();
imageObj.onload = function () {
    var kimage = new Kinetic.Image({
        x: 10,
        y: 10,
        image: imageObj
    });

    kimage.strokeEnabled(true);
    kimage.stroke("#1788a8");
    kimage.strokeWidth(11);

    // add the shape to the layer
    layer.add(kimage);

    // add the layer to the stage
    stage.add(layer);
};
imageObj.src = 'https://upload.wikimedia.org/wikipedia/commons/d/da/CatBlackHearts.png';

---

如何防止图像与笔划重叠？

画布笔划总是一半在其边界框内，一半在其边界框外绘制

边界框是图像大小

因此，您的蓝色笔划在图像内部为11/2=6.5像素

---

因此，要使边框完全位于图像外部，必须将边框与图像分开绘制。

如何将边框与图像分开绘制？（1）创建一个组，（2）在组中添加一个比图像宽和高11像素的笔划矩形（3）将图像添加到x=6.5和y=6.5的组中。