CODEWITHSUNDEEP
javascriptimagekineticjs
McFarlane
McFarlane

Reputation: 1877

KineticJS fillPatternImage not working since version 5.0

Since I updated my KineticJS version to the latest (5.0.0) version filling a shape with a pattern image doesn't work anymore.

This is the code i am using to display the pattern:


var stage = new Kinetic.Stage({
    container: document.getElementById("stage"),
    height: 200,
    width: 200
});

var layer = new Kinetic.Layer();

var shape = new Kinetic.Rect({
    x: 10,
    y: 10,
    width: 150,
    height: 150,
    fill: "red",
    fillPriority: "pattern"
});

var image = new Image();
image.onload = function () {
    shape.setFillPatternImage(image);
    stage.draw();
};
image.src = "http://placekitten.com/50/50";

layer.add(shape);
stage.add(layer);
stage.draw();

See an example here: http://jsfiddle.net/ss3hF/

And a working example with old version: http://jsfiddle.net/ss3hF/1/

Does anyone else experience this? Is it a bug or did i miss something in the ChangeLog?

Thanks in advance, McFarlane

Upvotes: 1

Views: 670

Answers (1)

lavrton
lavrton

Reputation: 20323

Solution:

shape.setFillPatternImage(image);
shape.fillPatternScaleX(1);
shape.fillPatternScaleY(1);
stage.draw();

Upvotes: 2

Related Questions