Question

我的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>

感谢您的帮助。

Answer 1

你非常接近。要获取形状的名称，需要使用.name（）。之后看起来你的一些代码会起作用。

我将建筑形状图层移到了页面上，并将文本放在代码片段的顶部，这样就可以更清楚地了解其他未来读者的情况。此外，由于Konvajs依赖于jquery存在，您可以使用方便的jquery选择器机制来访问您的测试元素。这对解决方案来说并不重要。

＆＃13;

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);

＆＃13;

<!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>

＆＃13;

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

1 个答案: