CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvaskineticjs
RecklessSergio
RecklessSergio

Reputation: 836

Multiple objects in canvas using kinetic js

I am trying to do an application with canvas and which have multiple objects with events binded to them like, mouse down and mouse up e.t.c.,

I am using kinetic js.

Well My doubt is if I have to draw two circles on canvas using kinetic js. I can use objects directly. But if I have to place 500 circles in the division, Its too difficult to have 500 circle objects to create manually. So, is there any other alternative to implement this one?

I use these events for every circle object I use

 var circle = new Kinetic.Circle({
    x: 100,
    y: 100,
    radius: 5,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 1
  });
    circle.setAttr('fact','Kinetic JS is Awesome')
    circle.on('mouseover', function() {
    document.body.style.cursor = 'pointer'
  });
  circle.on('mouseout', function() {
    document.body.style.cursor = 'default'
  });
  circle.on('mousedown', function() {
    var fill = this.getFill() == 'red' ? '#00d00f' : 'red';
    this.setFill(fill);
    alert(this.getAttr('fact'));// I do some stuff here
    layer.draw();
  });

Upvotes: 0

Views: 150

Answers (1)

Sahar Ch.
Sahar Ch.

Reputation: 489

I recommend also that you check the tutorials of KineticJS, this one is about a stress test: 1000 shapes + their respective tooltips.

http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs

PS: You just have to copy paste the code and update the KineticJS version here.

Upvotes: 1

Related Questions