在畫布中訪問精靈？

在OpenFL中定位HTML5很容易，但是，我無法爲精靈添加發光效果，我正在考慮解決方法，即使用JavaScript庫向Canvas中的精靈添加webGL效果。在畫布中訪問精靈？

但問題是，如何使用JavaScript訪問Canvas中的精靈？以及使用什麼工具檢查Canvas中的精靈？

2016-09-16 simo

canvas元素本質上只是一個動態位 - 這是一個DOM元素，可以顯示圖像的像素，線等，所以JS/HTML沒有的概念一個'精靈'，因此你不能'檢查'它。精靈只存在於OpenFL的抽象級別。因此，在某些方面，您仍然需要通過/使用OpenFL。今天我會仔細看看。 – 5Mixer

從4.0版本開始，openfl默認使用webgl渲染器，並且在這種情況下添加發光效果需要深入研究openfl/lime源代碼，我不能告訴你。但是，如果這是適合你的，力openfl與光暈效果使用帆布回退與

<haxedef name="canvas"/>

，然後你可以創建自定義位圖類（例如）像這樣

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

它的外觀

來源

2016-09-21 12:58:35

太棒了！其實，我不知道什麼是'RenderSession'，但是可以使用'Actuate'來補間context.shadowBlur？任何閱讀關於上下文類（CanvasRenderContext in lime）文檔的地方？ – simo

那麼，RenderSession是一種沒有文檔記錄的東西，你可以在閱讀lime/openfl源代碼時瞭解它。是的，你可以使用'Actuate'調用'context.shadowBlur'，但不能直接調用，因爲'__renderCanvas'被每幀調用，你可以在'HackyBitmap'上定義一個自定義屬性，它將被補間，我會更新我的答案一分鐘。 –

用補間示例更新了我的答案。 –

正如我在評論說，Sprites不JS/HTML存在，這是對的Canvas頂部的抽象ends up calling .drawImage，因此，你不會在任何瀏覽器的開發者工具找到它。你可以'訪問'這些精靈的唯一方法就是使用OpenFL提供的東西 - 你的精靈對象，BitmapData等。

你試圖得到輝光的方法可能是通過GlowFilter類，它被錯誤地描述爲'在所有平臺上可用'的文檔。該類尚未使用Canvas元素實現，但是could have been。

但是，OpenGL的WebGL存在，它不是所有的畫布。這就是着色器可能的原因。有一種用於webgl的發光濾鏡，內置於openfl中，首先顯示在this pull request的this commit中。所以使用着色器可能是你最好的選擇。

不幸的是，着色器不能與Canvas一起使用。我覺得做glows in canvas會是你最好的方法，但它還沒有實現。

來源

2016-09-20 01:09:02 5Mixer

有關OpenFL創始人的討論http://community.openfl.org/t/accessing-sprites-from-canvas-via-javascript-directly/8161/2關於這個問題..可能是你可以在那裏分享想法 – simo

在畫布中訪問精靈？

回答

相關問題