Question

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

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

Answer 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();
})

只有当鼠标移过它们时，才能看到锚点

1 个答案: