如何将事件转移到画布上{指针事件：none}; （！在KonvaJS中）

Question

The essence of the title is described and presented in my example . My task is to make the pseudo shape. You need to hover on the canvas element (triangle), canvas accepted property {pointer-events:all} , and the care with this element {pointer-events:none} . How this can be done using the framework 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: sorry for my english.

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');
    }
});

Demo: http://jsfiddle.net/vfp22dye/3/