Search code examples
kineticjs

Kinetic JS show border on Image after changing color

Has anyone else noticed this, or found a solution? Let's say I have an image.

       image.setAttrs({
            stroke: 'black',
            strokeWidth: 0,
            lineJoin: 'round',
            dash: [ 5, 5 ],
            dashEnabled: true,
            strokeEnabled: true 
        });

        image.draw();

This works fine, and my image is drawn with a square dashed border. Now let's recolor the image:

        image.cache();

        image.filters([Kinetic.Filters.RGB]);
        image.red(r).green(g).blue(b);

        image.draw();

Now the image is recolored, but the stroke is lost. I can't seem to find any way to make it reappear.

If I check the object using console.dir(), the attribute "strokeEnabled" shows as "true".

Solution

  • You have to clear cache before using stokeEnabled.

    myImage.clearCache();
myImage.strokeEnabled(true);
myImage.cache({
    x : myImage.x() - 2,
    y : myImage.y() - 2,
    width : myImage.width() + 4,
    height : myImage.height() + 4
});
myStage.draw();

    http://jsfiddle.net/PhJx9/23/