CinéticoJS:Como posso evitar que a imagem se sobreponha ao traço?

Question

Eu tenho uma imagem que está em uma camada KineticJS.Quando defino um traçado com largura > 1, a imagem irá se sobrepor ao traçado em alguns pontos.Aqui está um JSFiddle Eu fiz:

Esta imagem mostra o problema:

Meu código:

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

Como posso evitar que a imagem se sobreponha ao traço?

Answer 1

Um curso de lona é sempre desenhado meio dentro e meio fora de sua caixa delimitadora.

A caixa delimitadora é o tamanho da imagem.

Portanto, seu curso azul é 11/2= 6.5 pixels dentro de sua imagem.

Então, para ter sua fronteira completamente fora da imagem, você deve desenhar a fronteira separadamente da imagem.