锚点只有在鼠标经过时才可见答案

【问题标题】：Anchor points should only visible when mouse goes over them锚点只有在鼠标经过时才可见
【发布时间】：2013-02-14 10:26:53
【问题描述】：

下面的代码创建了一个可缩放且可拖动的三角形，其顶点具有锚点。我希望锚点只有在鼠标经过它们时才可见？？还有，如何实现碰撞检测来避免在三角形内绘制其他空间？

<html>
  <head>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js"></script>
    <script type="text/javascript">
      // the circle anchor points
      function buildAnchor(layer, x, y, name) {
        var anchor = new Kinetic.Circle({
          x: x,
          y: y,
          radius: 6,
          stroke: "#666",
          fill: "#ddd",
          strokeWidth: 2,
          draggable: true,
          name : name
        });

        // add hover styling
        anchor.on("mouseover", function() {
          document.body.style.cursor = "pointer";
          this.setStrokeWidth(4);
          layer.draw();
        });
        anchor.on("mouseout", function() {
          document.body.style.cursor = "default";
          this.setStrokeWidth(2);
          layer.draw();
        });

        layer.add(anchor);
        return anchor;
      }

      function buildTriangle(layer, points, name) {
        var triangle = new Kinetic.Polygon({
          stroke : "red",
          strokeWidth : 4,
          name : name,
          draggable : true
        });

        triangle.a = buildAnchor(layer, points[0], points[1], "anchor");
        triangle.b = buildAnchor(layer, points[2], points[3], "anchor");
        triangle.c = buildAnchor(layer, points[4], points[5], "anchor");
    triangle.was = { x : 0, y : 0 };

        layer.add(triangle);
        return triangle;
      }

      function drawTriangle() {
        var triangle = this.get(".triangle")[0];

        if ( !triangle.isDragging() ) { 
          triangle.setPoints([ triangle.a.attrs.x - triangle.was.x, 
                               triangle.a.attrs.y - triangle.was.y,
                               triangle.b.attrs.x - triangle.was.x,
                               triangle.b.attrs.y - triangle.was.y,
                               triangle.c.attrs.x - triangle.was.x,
                               triangle.c.attrs.y - triangle.was.y ]);
        } else {
          var anchors = this.get(".anchor");

          for ( var i = 0; i < anchors.length; i ++ ) {
            anchors[i].setX(anchors[i].getX() + (triangle.getX() - triangle.was.x));
            anchors[i].setY(anchors[i].getY() + (triangle.getY() - triangle.was.y));
          }

          triangle.was.x = triangle.getX();
          triangle.was.y = triangle.getY();
        }
      }

      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: "container",
          height: 200
        });

        var layer = new Kinetic.Layer({
          drawFunc : drawTriangle
        });

        var triangle = buildTriangle(layer, [60, 100, 90, 100, 90, 140], "triangle");
        triangle.moveToBottom();

        // add the layer to the stage
        stage.add(layer);
      }
    </script>
    <style>
      #container {
        border: 1px solid black;
      }
    </style>
  </head>
  <body onmousedown="return false;">
    <div id="container"></div>
  </body>
</html>

jsFiddle：http://jsfiddle.net/Y9AtR/

【问题讨论】：

这基本上是从this tutorial 粘贴的代码，看来您实际上并没有尝试自己解决它。尤其是您的第一点是如此简单，以至于您自己会发现。 jsfiddle.net/Y9AtR/1
@Tomalak，我正在尝试解决它，第二点我没有任何想法解决它。
第 1 点已得到解答（请参阅我上面评论中的链接）。对于第 2 点，您可以从该主题上已经存在的答案开始。 stackoverflow.com/search?q=triangle+collision+detection+2d 一旦你尝试了其中一种描述的方法并遇到问题，你应该回来问一个具体的问题。
PS：另外，下次请自己添加一个 jsFiddle，这会让人们的生活更轻松。
@Tomalak：谢谢，我会记住的。

标签： javascript html kineticjs

【解决方案1】：

我喜欢@Tomalak 的解决方案，这是我的：

http://jsfiddle.net/Y9AtR/2/

triangle.on('mouseover', function(){
     triangle.a.show();
     triangle.b.show();
     triangle.c.show();
     layer.draw();
});

triangle.on('mouseout', function(){
     //if( not near triangle ) // add some logic so that they don't disappear right away, maybe use distance formula?
     triangle.a.hide();
     triangle.b.hide();
     triangle.c.hide();
     layer.draw();
})

【讨论】：

另外，也许您可以更具体地了解您遇到的碰撞检测问题。