Hervorhebung HTML-Element auf Maus Hover Canvas Shape mit Canvas Shape Name

Ich habe einige Probleme mit meinem Javascript Canvas-Anwendung, wo ich versuche, die Hintergrundfarbe eines HTML-Element außerhalb des Canvas-Bereichs zu ändern, wenn Maus den Mauszeiger über ist eine Leinwandform. Ich benutze die Konva-Bibliothek.Hervorhebung HTML-Element auf Maus Hover Canvas Shape mit Canvas Shape Name

Was ich im Code zu tun versuche ist, die HTML-Seite Textklasse anzusteuern und den Hintergrund zu färben, wenn der Mauszeiger über dem Canvas-Element Shape Building steht. In verschiedenen Gebäuden werden verschiedene Textelemente hervorgehoben, um zu zeigen, welche Bereiche sich in diesem Gebäude befinden. Wenn der Cursor den Canvas-Bereich verlässt und sich nicht in einem anderen Gebäude befindet, werden keine Textelemente hervorgehoben. Es ist wie eine interaktive Karte.

Also was ich fragen ist, wie kann ich Textelement auf der HTML-Seite markieren, wenn Sie über Canvas Shape schweben, dann aufhören zu markieren, wenn Sie die Canvas-Form während der Verwendung von Konva Bibliothek?

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>

Vielen Dank für jede Hilfe.

Quelle

2017-11-14 Metzger

Sie waren sehr nah dran. Um den Namen der Form zu erhalten, müssen Sie .name() verwenden. Danach sieht es so aus, als ob etwas von deinem Code funktioniert hätte.

Ich habe die Building Shapes-Ebene auf die Seite verschoben und den Text oben im Snippet platziert, damit klarer wird, was für andere zukünftige Leser vor sich geht. Da Konvajs darüber hinaus darauf angewiesen ist, dass jquery vorhanden ist, können Sie den handlichen jquery-Auswahlmechanismus verwenden, um auf Ihre Testelemente zuzugreifen. Dies ist für die Lösung nicht kritisch.

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>

Quelle

2017-11-15 09:07:24

Danke. Dies löste das Problem, das ich auf die Klasse gerichtet hatte. Es läuft jetzt, ist es soll. – Metzger

Hervorhebung HTML-Element auf Maus Hover Canvas Shape mit Canvas Shape Name

Antwort

Verwandte Themen