使用 canvas 形状名称在鼠标悬停 canvas 形状时突出显示 HTML 元素

Question

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

我想在代码中做的是针对 html 侧面文本 class 并在鼠标光标悬停在 canvas 元素形状构建上时为其背景着色。移动到不同的建筑物，它突出显示不同的文本元素以显示该建筑物中的区域。当光标离开 canvas 建筑区域并且不在任何其他建筑上时，它不会突出显示任何文本元素。它就像一个交互式地图。

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

    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>

感谢您的帮助。

Answer 1

你们非常亲密。要获取形状的名称，您需要使用 .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);
   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>

使用 canvas 形状名称在鼠标悬停 canvas 形状时突出显示 HTML 元素

Highlighting HTML element on mouse hover canvas shape using canvas shape name

javascript

html

canvas

konvajs