Question

我正在使用画布应用，我需要能够创建位图，线条，组和管理点击事件。

我试过了：

动能v3.9.6.js
easeljs-0.4.2.min.js

这些是非常好的工具，但它们没有办法获得一组位图和线条的宽度。想象一下：

//init a image
var b = new Bitmap(...);
b.x ...
b.src ...

var l = Line(...);
l.x ...
l.y ...

//init group or layer or something like that
var g = Group(...);
g.add(b);
g.add(l);

var w = g.width;

这不起作用。

现在我正在考虑攻击 easeljs-0.4.2.min.js 来实现这个目标，因为它是一个很好的起点来移植as3 / as2简单代码，但我不是确定这是个好主意。

我非常喜欢Flash实现显示对象的方式，所以如果您知道某些工具，请告诉我。

Answer 1

您可以/应该将SVG用于您所描述的内容。

演示：http://jsfiddle.net/mNAd3/

var svgNS = 'http://www.w3.org/2000/svg',
    svg   = document.body.appendChild(document.createElementNS(svgNS,'svg'));

var l = document.createElementNS(svgNS,'line');
line.setAttribute('x1',10); line.setAttribute('y1',50);
line.setAttribute('x2',30); line.setAttribute('y2',150);

var g = svg.appendChild(document.createElementNS(svgNS,'g'));
g.appendChild(l);

var bbox = g.getBBox();
console.log(bbox);
// SVGRect:
//   height: 100
//   width: 20
//   x: 10
//   y: 50

var w = bbox.width;

请注意，您需要确保您的元素在屏幕上可见（将SVG添加到文档中，将组添加到SVG中）以计算边界框。

我故意没有包含创建图像的示例，因为使用异步加载的资源需要设置load处理程序以等待图像加载，我不想复杂化带有这些细节的演示。

由于SVG是保留模式图形API ，因此它具有对象大小的概念，并允许它们跟踪和处理鼠标事件。对于HTML5画布，情况并非如此（因为它是立即模式图形API 。）

是否有使用像API一样的Flash的canvas html5框架？

1 个答案:

演示：http://jsfiddle.net/mNAd3/