1

タイトルの本質は、私ので説明され、提示されています。私の仕事は疑似形状を作ることです。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: 私の英語で申し訳ありません。

4

1 に答える 1