flash - 从 Flash 切换到 的建议

Question

我做过很多 Flash 开发，一直想尝试一下 canvas有一段时间，但浏览了一些教程后，我不明白这应该如何取代 Flash。也许我想错了？

注意:我在这里问了很多问题。我真的不希望他们都得到答复。我真正在寻找的是一些关于我在开发 <canvas> 时应该如何思考的基本指导。 .

从规范来看，它看起来像 <canvas>确实更类似于 Graphics Flash 中的类，其中一个将使用如下内容:

class ColoredCircle extends Sprite {
    private var _color:uint=0x0;

    public function ColoredCircle(color:uint) {
        this.color = color;
    }

    public function set color(value:uint):void {
        _color = value;

        //******** CANVAS FUNCTIONALITY ***********
        this.graphics.clear();
        this.graphics.beginFill(_color);
        this.graphics.drawCircle(0, 0, 10);
        //*****************************************
    }
}

封闭的Sprite然而，class 有很多我非常喜欢使用的功能。如:

显示列表

var parentSprite:Sprite = new Sprite();    // container for everything

var childSprite:Sprite = new Sprite();     // mid-level container
parentSprite.addChild(childSprite);

var someCircle:ColoredCircle = new ColoredCircle(0xFF0000);  // my circle
childSprite.addChild(someCircle);

someCircle.x = 20;  // my circle moves to the right
childSprite.y = 40; // my circle moves down
parentSprite.rotation = 90; // my circle rotates 90 degrees around a point (20,40) away

过滤器

// Drop shadow
// note that this is NOT a box shadow 
// - it clings to the visible border of the sprite
someCircle.filters = [new DropShadowFilter(....)];

// Color transforms (could also use the ColorTransform filter)
someCircle.transform.colorTransform = new ColorTransform(.....);

// Can also do blur, glow etc.

面向对象

这主要是我可以创建一个类ColoredCircle这是一个提供所有这些功能的图形对象，但我可以扩展它。自动鼠标悬停、鼠标移出行为？简单的。被拖来拖去的能力？也很容易。我可以添加私有(private)成员来存储数据等。我可以轻松地从显示列表 (removeChild()) 中删除我的元素，然后同样轻松地将其添加回去。

...以及更多

还有一百万个其他便利设施(想到 getBounds() 和 localToGlobal()/globalToLocal())，但我可以没有它们生活。让我畏缩的是其他事情。

所以...只需使用大量 <canvas>是吗？

我应该治疗 <canvas>像Sprite ？将所有内容标记为 position:relative 应该允许我基本上复制显示列表类型的行为(我不相信你可以嵌套 <canvas> 元素，但你可以通过放入一堆 <div> 来实现)。但是，我使用了 很多 Sprite在我的项目中。那将是一堆小 Canvas 元素的公制废话。另外，您如何处理鼠标事件 <canvas> ？如果有人点击 Canvas 框模型的透明部分(坏)，它们会触发吗？如果我有一个带有两个圆圈的 Canvas 并且我需要知道点击了哪个圆圈，我是否必须对鼠标位置进行边界数学运算？ (呃)。

从我的(非常初步的)经验来看，这感觉更像是 Processing，这使得制作漂亮的、非交互式的东西变得非常容易，但是在其中开发 UI 却是一场噩梦。

Answer 1

单独使用 Canvas 会受到限制。 Canvas 基本上是带有一些 Graphics 类方法的 BitmapData。如果您想了解如何在没有 flash 的情况下做类似 flash 的事情，您应该看看 jquery 和 css3(请参阅 2DTransform jquery 插件)。

多年来我一直是 Flash 开发人员，当我决定开始使用 canvas 和 html5 时，我只会选择我在 Flash 中创建的东西，然后尝试使用 javascript html css 等重新创建它们......你您会发现您在 Flash 中所做的大部分工作都可以使用 jquery css 快速完成，有时也可以使用 canvas。

看一个示例可能对您有好处...也许您可以发布一个指向您在 Flash 中完成的内容的链接，我会指出 html5/javascript/canvas 等价物。