在Canvas中访问精灵？

Question

在OpenFL中定位HTML5很简单，但是，我无法为精灵添加发光效果，我正在考虑使用JavaScript库将画布效果添加到画布中的精灵。

但问题是，如何使用JavaScript访问Canvas中的精灵？以及在Canvas中使用什么工具来检查精灵？

Answer 1

如我的评论所述，{/ 1}}在JS / HTML中不存在，它是Sprites ends up calling .drawImage之上的抽象，因此，你不会在任何浏览器开发工具。你可以“访问”这些精灵的唯一方法就是使用OpenFL提供的东西 - 你的精灵对象，BitmapData等。

您尝试发光的方法可能是通过GlowFilter类，在文档中错误地将其描述为“在所有平台上都可以使用”。尚未使用Canvas元素实现此类，但could have been。

然而，WebGL存在于OpenFL，它不是全部画布。这就是着色器成为可能的原因。 webgl有一种内置于openfl的发光滤镜，首先显示在this commit的this pull request中。所以使用着色器可能是你最好的选择。

不幸的是，着色器不能与Canvas一起使用。我觉得做glows in canvas会是你最好的方法，但还没有实现。

Answer 2

首先，从版本4.0开始，openfl默认使用webgl渲染器，并且在这种情况下添加发光效果需要深入了解＃39;进入openfl / lime源代码，我无法给你。 但如果它适合你，强制openfl使用canvas backback with

<haxedef name="canvas"/>

然后你可以创建自定义Bitmap类（例如），像这样的发光效果

import openfl.display.Bitmap;
import openfl.display.BitmapData;
import openfl.display.PixelSnapping;
import openfl._internal.renderer.cairo.CairoBitmap;
import openfl._internal.renderer.canvas.CanvasBitmap;
import openfl._internal.renderer.dom.DOMBitmap;
import openfl._internal.renderer.opengl.GLBitmap;
import openfl._internal.renderer.RenderSession;

class HackyBitmap extends Bitmap
{

    /**
     * Custom property for tweening
     */
    public var glowBlur:Float = 0.0;    

    public function new(bitmapData:BitmapData=null, pixelSnapping:PixelSnapping=null, smoothing:Bool=false) 
    {
        super(bitmapData, pixelSnapping, smoothing);

    }


    public override function __renderCanvas (renderSession:RenderSession):Void {


        var context = renderSession.context;

        if (glowBlur > 0)
        {
            context.save();
            context.shadowBlur = glowBlur;
            context.shadowColor = "white";
        }


        CanvasBitmap.render (this, renderSession);

        if (glowBlur > 0)
        {
            context.restore();  
        }

    }

}

用法

var data = Assets.getBitmapData("img/berry.png");
var hacky = new HackyBitmap(data);
hacky.x = hacky.y = 20;
addChild(hacky);

//to animate glow property
Actuate.tween(hacky, 1.0, { glowBlur: 50 }).repeat().reflect();

OpenFL / Lime版本

lime 3.2.0
openfl 4.2.0

看起来如何