Question

我正在尝试使用canvas创建一个应用程序，它有多个对象，其中包含绑定到它们的事件，例如鼠标按下并向上鼠标移动e.t.c.，

我正在使用动力学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版本。

画布中的多个对象使用kinetic js

1 个答案: