Search code examples
javascriptjquerykineticjs

KineticJS setting stroke programmatically


I have some text, that has a class in the form of "link variabletext" (where variabletext is unique to each link). I'm trying to set this up so that when I mouseover the text, the corresponding object changes color, using jQuery.

A jsFiddle of what I have: http://jsfiddle.net/hdJCn/

The code I'm using:

<a href="javascript:void(0);" class="link one">One</a>
<a href="javascript:void(0);" class="link two">Two</a>
<a href="javascript:void(0);" class="link three">Three</a>
<div id="container"></div>

var stage = new Kinetic.Stage({
container: 'container'
});

var layer = new Kinetic.Layer();

var onecircle = new Kinetic.Ellipse({
x: 100,
y: 100,
radius: {
    x: 50,
    y: 50
},
strokeWidth: 1,
stroke: 'black'
});

layer.add(onecircle);
stage.add(layer);

$('.link').mouseover(function () {
var numclass = $(this).attr('class').split(' ')[1];
(numclass + 'circle').setStroke('orange');
});

The problem is that it says that the object has no method "setStroke". If I take that same object name and hardcode it (so onecircle.setStroke instead of the above) it works fine. I'm not sure why this is and so far am at a loss.


Solution

  • Figured it out. I had to convert the string to an object:

    var obj = eval(numclass+'circle');
    

    And then use obj.setStroke....