錨點只能在鼠標移過它們時纔可見

下面的代碼創建一個可縮放和可拖動的三角形，並在其頂點具有錨點。我希望只有當鼠標移過它們時才能看到錨點？以及如何實現碰撞檢測以避免在三角形內繪製其他空間？錨點只能在鼠標移過它們時纔可見

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

來源

2013-02-28 PGB

這本質上是[本教程（HTTP粘貼代碼：/ /tech.joshuacummings.com/2012/07/scalable-draggable-anchored-triangle-in.html），並且你似乎並沒有嘗試自己解決它。特別是你的第一點很簡單，你可以自己發現。 http://jsfiddle.net/Y9AtR/1/ – Tomalak 2013-02-28 10:53:09

@Tomalak，我正在嘗試和靠近來解決它，對於第二點我沒有任何想法來解決它。 – PGB 2013-02-28 11:06:33

回答第1點（請參閱上面我的評論中的鏈接）。對於第2點，您可以從本主題中已有的答案開始。 http://stackoverflow.com/search?q=triangle+collision+detection+2d一旦你嘗試了所描述的方式之一併遇到問題，你應該回來問一個具體的問題。 – Tomalak 2013-02-28 11:52:02

我喜歡@託默勒格的解決方案，這裏是我的：

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

來源

2013-02-28 15:58:43 SoluableNonagon

另外，也許你可以更具體地瞭解你所碰到的碰撞檢測問題。 – SoluableNonagon 2013-02-28 15:59:19

錨點只能在鼠標移過它們時纔可見

回答

相關問題