CreateJS 事件到 Javascript 个事件

Question

我有两个 canvas 元素层叠在一起。顶部 canvas 用于 UI 并使用 createjs 框架实现它的魔力。

另一个canvas元素是基于babylon js框架，绘制一些3D魔法。

我的麻烦是层与层之间的通信。我在 UI 层上创建了一个不可见的矩形来捕获鼠标事件，但它们以 CreateJS MouseEvents 的形式出现，我需要将它们转换为 HTML 版本以分派到 3D 层。

有人知道将 createJS 鼠标事件转换为 HTML 鼠标事件所需的代码是什么吗？（请不要jquery）

这是 haxe 代码中的想法（至少是真正重要的部分）：

private function initialize()
{
    _blocker = new Shape();
    _blocker.graphics.beginFill("#000000");
    _blocker.graphics.drawRect(0, 0, Container3D.WIDTH, Container3D.HEIGHT);
    _blocker.graphics.endFill();
    _blocker.alpha = 0.01;

    _blocker.addDblclickEventListener(onEvent);
    _blocker.addClickEventListener(onEvent);
    _blocker.addMousedownEventListener(onEvent);
    _blocker.addMouseoutEventListener(onEvent);
    _blocker.addMouseoverEventListener(onEvent);
    _blocker.addPressmoveEventListener(onEvent);
    _blocker.addPressupEventListener(onEvent);
    _blocker.addRolloutEventListener(onEvent);
    _blocker.addRolloverEventListener(onEvent);
}

private function onEvent(e:MouseEvent):Void
{
    /* need to convert the createjs mousevent to an html mouseevent here */
//var htmlMouseEvent:js.html.MouseEvent = convertToHtmlEvent(e);
        // and dispatch it on the other canvas
        my3DCanvas.dispatchEvent(htmlMouseEvent);
}

private function converToHtmlEvent(evToConvert):js.html.MouseEvent
{
   // do magic here
}

谢谢。

Answer 1

CreateJS 事件包含对触发它们的本机事件的引用。

private function onEvent(e:MouseEvent):Void
{
    /* need to convert the createjs mousevent to an html mouseevent here */
//var htmlMouseEvent:js.html.MouseEvent = convertToHtmlEvent(e);
        // and dispatch it on the other canvas
        var htmlMouseEvent = e.nativeEvent;
        my3DCanvas.dispatchEvent(htmlMouseEvent);
}

这是文档：http://createjs.com/docs/easeljs/classes/MouseEvent.html#property_nativeEvent

希望对您有所帮助！

CreateJS 事件到 Javascript 个事件

CreateJS Events to Javascript events

javascript

html

canvas

createjs