CODEWITHSUNDEEP
javascriptcanvashtml5-canvaskineticjs
Scotty
Scotty

Reputation: 2665

Kinetic JS: Fading in a fill image when applying it to a polygon shape?

I'm having a play around with Kinetic JS at the moment, with the following example:

http://jsfiddle.net/r8rtJ/4/

var yoda = new Kinetic.Image({
    x: 0,
    y: 0,
    image: imageObj,
    width: 106,
    height: 118,
    scale: 2
});
poly.setFill({
image: imageObj,
offset: {x: 0, y: 0}
});

And i'm wondering if there is a way to fade in the opacity of the image fill once the object has loaded? At the moment it just applies to the polygon instantly, and i can't seem to figure out how to set the opacity of the fill independently from the object itself.

Cheers!

Upvotes: 2

Views: 2995

Answers (2)

Eric Rowell
Eric Rowell

Reputation: 5219

yes there's a way to do this. use the transitionTo method to fade the shape opacity like this:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/

If you want to have a stroke applied, that stays opaque the whole time, you can simply create another shape with a stroke only that sits on top of the shape filled with an image

Upvotes: 1

Rikonator
Rikonator

Reputation: 1860

setFill merely tells the polygon object what it should fill itself with when it is supposed to draw itself. This can be image or color.

To set the opacity with which the polygon is drawn, you have the opacity property. What you're trying to achieve can be done by combining a timeout with a function which increases the polygon's opacity and redraws it.

var fadeIn = function(shape) {
    var o = shape.getOpacity();
    o = o + 0.1 >=1 ? 1 : o + 0.1;
    shape.setOpacity(o);
    shape.getLayer().draw();
    if(o !== 1) {
        setTimeout(function() {
                fadeIn(shape);
            }, 120);
    }
};

Example.

EDIT:

There seems to be no way to set the opacity of the fill currently in KinectJS. I've been trying to see if I can find a workaround, though.

One way to do it is, as you mentioned, drawing another polygon with only the stroke and an empty fill over the polygon with the fill, and removing the stroke polygon once the fading in has finished.

Example.

Another way would be to change the drawFunc for the particular polygon.

Whenever a particular layer's draw function is called, drawScene and drawHit functions are called for all its children. drawScene and drawHit functions for Kinetic.Shape call the object's drawFunc. drawScene sets the globalAlpha based on the shape's opacity before calling drawFunc.

The way drawFunc for Kinetic.Polygon is set up is that first, a path is formed on the context for the sides of the polygon. Then it is filled, followed by stroke. The way filling is done is simply setting the fillStyle of the context based on the fill of the polygon, and then context.fill is called.

How is the fill style set with images? When setFill is called for a polygon and the object passed as argument has the property image, fillType is considered to be 'PATTERN'. When the path made by drawFunc is to be filled, a pattern is created using the image and context.createPattern and set as the fill style. Opacity is never considered.

But, we can make a particular polygon consider the fill's opacity by changing its drawFunc with setDrawFunc. I simply copied the drawFunc from KinectJS source and added a condition to fill patterns differently by considering opacity passed with setFill.

Example.

Note that, though, this breaks the mouseover event for some reason. It'd be best to stick to method one until I, or someone else, for that matter, figures out what makes the mouseover not work when drawFunc is changed.

EDIT 2:

I managed to figure it out!

A polygon's drawHitFunc is the same as its drawFunc. So when we change the drawFunc, we end up changing the drawHitFunc which creates problems for when hit detection is required - as is the case with mouseover events.

So, when we change the drawFunc for a polygon, if we also change the drawHitFunc with setDrawHitFunc so that it is the same as the original drawFunc, we avoid breaking the hit-detection.

Example.

Upvotes: 3

Related Questions