使用动力学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 版本即可。