使用画布形状名称突出显示鼠标悬停画布形状上的 HTML 元素答案

【问题标题】：Highlighting HTML element on mouse hover canvas shape using canvas shape name使用画布形状名称突出显示鼠标悬停画布形状上的 HTML 元素
【发布时间】：2017-11-14 12:19:52
【问题描述】：

我的 javascript 画布应用程序出现了一些问题，当鼠标光标位于画布形状上时，我尝试更改画布区域外的 html 元素的背景颜色。我正在使用 konva 库。

我在代码中尝试做的是定位 html 端文本类并在鼠标光标位于画布元素形状构建时为其背景着色。移动到不同的建筑物，它会突出显示不同的文本元素以显示该建筑物中的哪些区域。当光标离开画布建筑区域并且不在任何其他建筑上时，它不会突出显示任何文本元素。它就像一个交互式地图。

所以我要问的是，如何在将鼠标悬停在画布形状上时突出显示 html 端的文本元素，然后在使用 konva 库时离开画布形状时停止突出显示？

    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);
 		var poly = new Konva.Line({       
		points: s.points,
     	fill: 'rgba(255,0,0,0.2)',
      	stroke: 'black',
      	strokeWidth: 3,
      	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>

感谢您的帮助。

【问题讨论】：

标签： javascript html canvas konvajs

【解决方案1】：

你们很亲密。要获取形状的名称，您需要使用 .name()。之后，您的某些代码似乎可以正常工作。

我将建筑形状图层移到页面上方，并将文本放在 sn-p 的顶部，以便其他未来读者更清楚地了解正在发生的事情。此外，由于 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);
 		var poly = new Konva.Line({       
		points: s.points,
     	fill: 'rgba(255,0,0,0.2)',
      	stroke: 'black',
      	strokeWidth: 3,
      	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>

【讨论】：

谢谢。这解决了我针对班级的问题。它现在运行是应该的。