Несколько объектов на холсте с использованием кинетической JS

Question

Я пытаюсь сделать приложение с холстом, и у которого есть несколько объектов с событиями, привязанными к ним, как, мыши вниз и мыши вверх и т. Д.,

Я использую кинетические JS.

Ну, я сомневаюсь, что мне нужно нарисовать два круга на холсте, используя кинетические js. Я могу использовать объекты напрямую. Но если мне нужно разместить 500 кругов в делении, слишком сложно иметь 500 объектов кругов, чтобы создать их вручную. Итак, есть ли другая альтернатива для реализации этого?

Я использую эти события для каждого объекта круга, который я использую

 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();
  });

Answer 1

Я также рекомендую вам ознакомиться с учебными пособиями KineticJS, в которых рассказывается о стресс-тестах: 1000 фигур + соответствующие им подсказки.

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

PS: Вам просто нужно скопировать, вставить код и обновить версию KineticJS здесь.