KineticJS：如何防止Image與筆觸重疊？

Question

我有一個在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';

如何防止圖像與筆畫重疊？

Answer 1

畫布筆划總是在其邊界框的內側和外側繪制。

邊界框是圖像大小。

因此，您的藍色筆觸在圖像內部為11/2 = 6.5像素。

因此，要使邊框完全位於圖像外部，必須將邊框與圖像分開繪制。