Question

我用循环生成10个圆圈，

和mouseup当前圈，

var shapesLayer = new Kinetic.Layer();
for(var i =0; i<10; i++){    
var circle = new Kinetic.Circle({
    x: 50+i*50,
    y: 50+i*50,
    radius: 10,
    fill: 'black',
    id: i
});
shapesLayer.add(circle);
circle.on('mouseup', function() {
    circle.setFill('black'); // this is not working
    this.setFill('red');  
    shapesLayer.draw();
    });

}

我想改变圆圈的焦点，而鼠标移动一圈，圆圈变为红色，但其他圆圈将颜色变回黑色。无论如何要做到这一点？

Answer 1

在您的mouseup处理程序中，将所有圆形填充重置为黑色，然后将所选圆圈的填充设置为红色：

首先，将name:"circle"添加到您创建的每个圈子中，以便稍后按名称获取它们：

var circle = new Kinetic.Circle({
   x: 50+i*50,
   y: 50+i*50,
   radius: 10,
   fill: 'black',
   id: i,
   name:"circle"
});

然后在你的mouseup处理程序中：

将每个圆圈填充重置为黑色。

将所选圆圈的填充设置为红色。

      circle.on('mouseup', function() {
          // reset all circle fills to black
          resetToBlackOnMouseUp()
          // then set this circle's fill to red
          this.setFill('red');  
          layer.draw();
      });

此功能会将名为“circle”的所有圆圈的填充重置为黑色。

      // reset all circle fills to black
      function resetToBlackOnMouseUp(){
          // get all elements named "circle"
          var circles=stage.get(".circle");
          // set their fills to black
          circles.each( function(circle){
              circle.setFill("black");
          });
      }

如果你的舞台上只有一组圆圈，那么你有一个替代＆amp;更有效的选择。

您可以保存对之前红色圆圈的引用，然后将该填充重置为黑色。

var redCircle;

// add mouseup handler
circle.on('mouseup', function() {
    // reset the previous red circle's fill to black
    redCircle.setFill("black");
    // then set this circle's fill to red
    this.setFill('red');  
    // now this circle becomes the red circle
    redCircle=this;

    layer.draw();
});

这是代码和小提琴：http://jsfiddle.net/m1erickson/CyxSj/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #buttons {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #buttons > input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.3.min.js"></script>
    <script defer="defer">

      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();
      stage.add(layer);

      for(var i =0; i<10; i++){    
          var circle = new Kinetic.Circle({
              x: 50+i*50,
              y: 50+i*50,
              radius: 10,
              fill: 'black',
              id: i,
              name:"circle"
          });
          // add mouseup handler
          circle.on('mouseup', function() {
              // reset all circle fills to black
              resetToBlackOnMouseUp()
              // then set this circle's fill to red
              this.setFill('red');  
              layer.draw();
          });
          layer.add(circle);
          console.log(i);
      }
      layer.draw();

      // reset all circle fills to black
      function resetToBlackOnMouseUp(){
          // get all elements named "circle"
          var circles=stage.get(".circle");
          // set their fills to black
          circles.each( function(circle){
              circle.setFill("black");
          });
      }

    </script>
  </body>
</html>

Kinetic JS在鼠标时更改焦点

1 个答案: