KineticJS：如何防止图像重叠笔画？答案

【问题标题】：KineticJS: How can I prevent Image from overlapping the stroke?KineticJS：如何防止图像重叠笔画？
【发布时间】：2014-05-26 02:30:42
【问题描述】：

我有一个位于 KineticJS 层中的图像。当我设置宽度 > 1 的笔划时，图像将在某些点与笔划重叠。这是我制作的JSFiddle：

这张图显示了问题：

我的代码：

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';

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

【问题讨论】：

标签： javascript html canvas kineticjs

【解决方案1】：

画布笔划总是画在其边界框的一半内侧和一半外侧。

边界框是图像大小。

因此，您的蓝色描边在图像内是 11/2 = 6.5 像素。

因此，要让边框完全在图像之外，您必须将边框与图像分开绘制。

【讨论】：

如何将边框与图片分开绘制？
(1) 创建一个组，(2) 在组中添加一个描边矩形，该矩形的宽度和高度比图像大 11 像素 (3) 将您的图像添加到 x=6.5 和y=6.5。