如何将事件传输到 canvas { pointer-events : none }; （！在 KonvaJS 中）

Question

标题的本质在我的 example 中进行了描述和呈现。我的任务是制作伪形状。您需要将鼠标悬停在 canvas 元素（三角形）上，canvas 接受属性 {pointer-events:all}，并注意此元素 {pointer-events:none}。如何使用框架 konvajs 完成此操作。

    /*NON GIST*/
    var stage=new Konva.Stage({container:'container',width:300,height:300})
       ,layer=new Konva.Layer()
       ,triangle=new Konva.RegularPolygon({x:80,y:120,sides:3,radius:80,fill:'#00D2FF',stroke:'black',strokeWidth:4})
       ,text=new Konva.Text({x:10,y:10,fontFamily:'Calibri',fontSize:24,text:'',fill:'black'});
    function writeMessage(message){text.setText(message);layer.draw();}
    /*GIST*/
        triangle.on('mouseout', function() {

          $('#container').css('pointer-events',/*!*/'none');

          writeMessage('Mouseout triangle');
        });
        
        /*! How do I know if the events are not tracked on the canvas?*/
        triangle.on('mousemove', function() {

          $('#container').css('pointer-events',/*!*/'all');
          
          var mousePos = stage.getPointerPosition();
          var x = mousePos.x - 190;
          var y = mousePos.y - 40;
          writeMessage('x: ' + x + ', y: ' + y);
        });
    /*/GIST/*/
    layer.add(triangle);
    layer.add(text);
    stage.add(layer);

    body{
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;}
    #container{
      position:absolute;
      z-index:1;
    }
    .lower-dom-element{
        position:absolute;
        z-index:0;
        padding:20px;
        background:#0e0;
        top: 90px;
        left: 0px;}

     <script src="https://cdn.rawgit.com/konvajs/konva/0.9.0/konva.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

    <div id="container"></div>
    <div class="lower-dom-element">
        If the POINTER-EVENTS on me, then canvas POINTER-EVENTS:NONE, and vice versa.
        If the events are not on the triangle, then the event with me.
      </div>

PS: 对不起我的英语。

Answer 1

var $con = $('#container');
$(document.body).mousemove(function(event) {
    var x = event.clientX, y = event.clientY;
    var offset = $con.offset();
    // manually check intersection
    if (layer.getIntersection({x: x - offset.left, y: y - offset.top})){        
        $con.css('pointer-events',/*!*/'all');
    } else {
        $con.css('pointer-events',/*!*/'none');
    }
});

演示：http://jsfiddle.net/vfp22dye/3/

如何将事件传输到 canvas { pointer-events : none }; （！在 KonvaJS 中）

How to transfer events into the canvas { pointer-events : none }; (!in KonvaJS)

javascript

html5-canvas

pointer-events

konvajs