javascript - 使用kinetic js在 Canvas 中显示多个对象

Question

我正在尝试使用 Canvas 创建一个应用程序，该应用程序有多个对象，这些对象绑定(bind)了事件，例如鼠标按下和鼠标向上等，

我正在使用kinetic js。

嗯，我的疑问是我是否必须使用kinetic js在 Canvas 上绘制两个圆圈。我可以直接使用对象。但如果我必须在分区中放置 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 版本即可。