0

我正在开发一个画布应用程序，我需要能够创建位图、线条、组并管理点击事件。

我试过了：

  1. 动力学-v3.9.6.js
  2. 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 实现显示对象的方式，所以如果你知道一些工具，请告诉我。

4

1 回答 1

2

您可以/应该将 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。）

于 2012-05-24T20:43:55.573 回答