キャンバスのシェイプ名を使用してマウスのホバーキャンバスシェイプでHTML要素をハイライトする

マウスカーソルが上にあるときにキャンバス領域外のhtml要素の背景色を変更しようとするjavascriptキャンバスアプリケーションに問題がありますキャンバスの形。私はkonvaライブラリを使用しています。キャンバスのシェイプ名を使用してマウスのホバーキャンバスシェイプでHTML要素をハイライトする

私がコード内でやろうとしているのは、マウスのカーソルがキャンバスの要素シェイプの建物の上にあるときに、HTML側のテキストクラスをターゲットにしてその背景を着色することです。別の建物に移動すると、さまざまなテキスト要素が強調表示され、その建物内の領域が示されます。カーソルがキャンバスの建物エリアを離れ、他の建物にない場合は、テキスト要素は強調表示されません。そのインタラクティブなマップのような。

konvaライブラリを使用しているときにキャンバスシェイプを離れるときに強調表示を停止すると、html側でテキスト要素を強調表示する方法はありますか？任意の助け

var stage = new Konva.Stage({ 
 
     container: 'container', 
 
     width: 600, 
 
     height: 800 
 
    }); 
 

 
var layer = new Konva.Layer(); 
 

 
//just few buildings for example 
 
var shapes = []; 
 

 
shapes.push({ 
 
    points: [117,188,218,188,218,218,137,218,137,225,117,225], 
 
    name: "Building-A", 
 
    link: "a-building-link", 
 
}); 
 

 
shapes.push({ 
 
    points: [230,185,255,185,255,310,250,310,250,318,237,318,237,310,230,310], 
 
    name: "Building-B", 
 
    link: "b-building-link", 
 
}); 
 

 
shapes.push({ 
 
    points: [261,134,367,134,367,152,261,152], 
 
    name: "Building-C", 
 
    link: "c-building-link", 
 
}); 
 

 
for (var i = 0; i < shapes.length; i++) { 
 
    var s = shapes[i]; 
 
    //var links = document.getElementsByClassName(s.link); 
 
    \t \t var poly = new Konva.Line({  
 
\t \t points: s.points, 
 
     \t fill: 'rgba(255,0,0,0.2)', 
 
     \t stroke: 'black', 
 
     \t strokeWidth: 3, 
 
     \t closed : true, 
 
     name: s.link, 
 
     opacity: 0 
 
      }); 
 

 
      poly.on('mouseover', function() { 
 
       this.opacity(1); 
 
       layer.draw(); 
 
       //Some things I tried to get this working 
 
       //for (var i = 0; i < links.length; i++) { 
 
       //var item = links[i]; 
 
        //item.style.backgroundColor = "#ffcc00"; 
 
       //} 
 
       ///////////////// 
 
       //var item = this.name; 
 
       //item.style.backgroundColor = "#ffcc00"; 
 
       //////////////// 
 
       //document.getElementsByClassName(this.name).style.backgroundColor = "#ffcc00"; 
 
       /////////////// 
 
       //highlight_target = this.name; 
 
       /////////////// 
 
       //document.getElementsByClassName(${this.name}).style.backgroundColor = "#ffcc00"; 
 
       /////////////// 
 
       //document.getElementsByClassName(s.name).style.backgroundColor = "#ffcc00"; 
 
      }); 
 

 
      poly.on('mouseout', function() { 
 
       this.opacity(0); 
 
       layer.draw(); 
 
       //Some things I tried to get this working 
 
       //for (var i = 0; i < links.length; i++) { 
 
        //var item = links[i]; 
 
        //item.style.backgroundColor = ""; 
 
       //} 
 
       ///////////// 
 
       //var item = this.name; 
 
       //item.style.backgroundColor = ""; 
 
       ///////////// 
 
       //document.getElementsByClassName(this.name).style.backgroundColor = ""; 
 
       ///////////// 
 
       //highlight_target = ""; 
 
       ///////////// 
 
       //document.getElementsByClassName(${this.name }).style.backgroundColor = ""; 
 
       ///////////// 
 
       //document.getElementsByClassName(s.name).style.backgroundColor = ""; 
 
      }); 
 

 
    layer.add(poly); 
 
} 
 

 
stage.add(layer);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div id="container"></div> 
 
    <div class="textlink a-building-link b-building-link"> 
 
       <span>Place 1</span> 
 
       <span>A, B</span> 
 
       <span>1</span> 
 
      </div> 
 
      <div class="textlink c-building-link"> 
 
       <span>Place 4 and 5</span> 
 
       <span>C</span> 
 
       <span>3</span> 
 
      </div> 
 
      
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
    <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script> 
 
    <script type="text/javascript" src="test.js"></script> 
 

 

 

 
</body> 
 
</html>

感謝。

出典

2017-11-14 Metzger

あなたは非常に近くでした。シェイプの名前を取得するには、.name（）を使用する必要があります。その後、いくつかのコードがうまくいくように見えます。

ビルディングシェイプのレイヤーをページの上に移動し、スニペットの上部にテキストを配置して、将来の他の読者のために何が起こっているのかが明確になるようにしました。さらに、Konvajsはjqueryの存在を前提としているので、便利なjqueryセレクタメカニズムを使用してテストエレメントにアクセスすることができます。これはソリューションにとって重要ではありません。

var stage = new Konva.Stage({ 
 
     container: 'container', 
 
     width: 600, 
 
     height: 400 
 
    }); 
 

 
var layer = new Konva.Layer(); 
 

 
//just few buildings for example 
 
var shapes = []; 
 

 
shapes.push({ 
 
    points: [117,188,218,188,218,218,137,218,137,225,117,225], 
 
    name: "Building-A", 
 
    link: "a-building-link", 
 
}); 
 

 
shapes.push({ 
 
    points: [230,185,255,185,255,310,250,310,250,318,237,318,237,310,230,310], 
 
    name: "Building-B", 
 
    link: "b-building-link", 
 
}); 
 

 
shapes.push({ 
 
    points: [261,134,367,134,367,152,261,152], 
 
    name: "Building-C", 
 
    link: "c-building-link", 
 
}); 
 

 
for (var i = 0; i < shapes.length; i++) { 
 
    var s = shapes[i]; 
 
    //var links = document.getElementsByClassName(s.link); 
 
    \t \t var poly = new Konva.Line({  
 
\t \t points: s.points, 
 
     \t fill: 'rgba(255,0,0,0.2)', 
 
     \t stroke: 'black', 
 
     \t strokeWidth: 3, 
 
     \t closed : true, 
 
     name: s.link, 
 
     opacity: 0.5 
 
      }); 
 

 
      poly.on('mouseover', function() { 
 
       this.opacity(1); 
 
       layer.draw(); 
 

 
       // use name() to ge the name. I then use the name as a jquery selector. 
 
       $('.' +this.name()).css({ backgroundColor: "#ffcc00"}); 
 
      }); 
 

 
      poly.on('mouseout', function() { 
 
       this.opacity(0.5); 
 
       layer.draw(); 
 
       $('.' +this.name()).css({ backgroundColor: "transparent"}); 
 
      }); 
 

 
    layer.add(poly); 
 
    layer.move({x:0, y:-40}) // make layer nearer the top of page for SO. 
 
    stage.draw(); 
 
} 
 

 
stage.add(layer);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div class="textlink a-building-link b-building-link"> 
 
       <span>Place 1</span> 
 
       <span>A, B</span> 
 
       <span>1</span> 
 
      </div> 
 
      <div class="textlink c-building-link"> 
 
       <span>Place 4 and 5</span> 
 
       <span>C</span> 
 
       <span>3</span> 
 
      </div> 
 
    <div id="container"></div> 
 
      
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
    <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script> 
 
    <script type="text/javascript" src="test.js"></script> 
 

 

 

 
</body> 
 
</html>

出典

2017-11-15 09:07:24

ありがとうございます。これは私がクラスをターゲットにしていた問題を解決しました。それは今実行されている実行されます。 – Metzger

キャンバスのシェイプ名を使用してマウスのホバーキャンバスシェイプでHTML要素をハイライトする

答えて

関連する問題