CODEWITHSUNDEEP
javascriptsignalrkineticjs
Pmleader
Pmleader

Reputation: 236

Opacity keeps increasing with each call

I'm working on a project where I combined KineticJS with SignalR to update the stage on server calls.

So far everything works pretty good, and for the things that didn't work I had great help with the questions and answers on SO.

However this time I can't get it to work I also can't find any questions with a similar problem.

Basically I'm dynamically generating the init script for the KineticJS stage.(this all works perfectly) the code output looks like this:

var stage = new Kinetic.Stage({
    id: 1,
    container: 'stage-container',
    width: self.baseWidth,
    height: self.baseHeight
});

And for a shape it looks like this:

var shape129 = new Kinetic.Line({
    id: 'shape129',
    points: [249,66, 1889,66, 1889,928, 249,928, 249,66],
    fill: '#DADADA',
    opacity: 1,
    stroke: '#3B5A99',
    strokeWidth: 0,
    closed: true,
    draggable: true
});

So far so good.

It all renders perfectly.

Then the magic happens and I use a SignalR method to change the color of the shape With the following code I get perfect color switches but not the desired opacity:

signal.client.statuschange = function (id, message) {
    var shape = Kinetic.stages[0].find('#' + id);
    shape.setAttr('fill', message);
    shape.setOpacity(0.5);
    shape.getLayer().draw();
};

As I said the color changes perfectly but the opacity keeps increasing with each call to the method.

I'm kinda lost here and not sure what is happening and most of all Why it is happening.

Any help would be very much appreciated!

Upvotes: 0

Views: 69

Answers (1)

lavrton
lavrton

Reputation: 20308

I think problem in find function. Your shape is not a node, but a collection. Try this:

var shape = Kinetic.stages[0].find('#' + id)[0];

Upvotes: 1

Related Questions