Question

比方说，我在同一original[0].merge!(a.stringify_keys) original.to_yaml # => --- - type: log enabled: true paths: processors: drop_event: when: or: - equals: status: 500 - equals: status: -1中有2个Rect，一个大，一个小。没有Layer，也没有其他Group。小Shape是可拖动，可调整大小和可旋转的，大{是静态的。

我想确保您不能将小号拖到大号的外面，并且我希望小号Rect的旋转或缩放都受到尊重。

我在两个Rect上都使用getClientRect来定义拖动范围。现在，当我知道小的Rect的边界矩形所需的x和y时，如何设置它？我无法进行Rect，因为小矩形可能会旋转，这意味着setAbsolutePosition({ x, y })。我尝试使用getAbsolutePosition().x !== getClientRect().x来转换坐标，但是我没有运气。

谢谢。

Answer 1

这可能会带您上路。使用变压器旋转矩形，使其碰到红色矩形，或将其拖动，以查看使用客户端矩形效果进行的边界检查。我在变压器boundBoxFunc和rect.dragBoundFunc中使用了客户端rect。

注意：存在一个问题，就是重叠的计算会以某种方式离开矩形，使其与边界重叠。可能需要解决的错误。

var stage = new Konva.Stage({
  container: 'canvas-container',
  width: 650,
  height: 300
});


var layer = new Konva.Layer();
stage.add(layer);

var rectOuter = new Konva.Rect({
   width: 240, height: 150, x: 80, y: 80, draggable: true, stroke: 'red'
  })
layer.add(rectOuter);

var rect = new Konva.Rect({
   width: 40, height: 50, x: 140, y: 140, draggable: true, fill: 'cyan',
  dragBoundFunc: function(newBoundBox) {
    var pos = rect.getClientRect();

    if (intersectRect(pos,  rectOuter.getClientRect())){
      return {
        x: oldBoundBox.x,
        y: oldBoundBox.y      
      }      
    }
    oldBoundBox.x = newBoundBox.x; // note old box for use if we deny the drag
    oldBoundBox.y = newBoundBox.y;
    return {
      x: newBoundBox.x,
      y: newBoundBox.y      
    }
  }  
  })
layer.add(rect);
var oldBoundBox = rect.getAbsolutePosition();

var rect2 = new Konva.Rect ({
  stroke: 'magenta', listening: false,  
})
layer.add(rect2);

var text = new Konva.Text({
  x: 5,
  y: 5,
});
layer.add(text);
updateText();


 
  // make the transformer for the image
  var transformer = new Konva.Transformer({
    node: rect,
    enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
      boundBoxFunc: function (oldBoundBox, newBoundBox) {
        var pos = rect.getClientRect();
        
        if (intersectRect(pos,  rectOuter.getClientRect())){
          return oldBoundBox;
        }
        
        return newBoundBox
      }    
  });
  layer.add(transformer);

    rect.on('dragmove', function () {
      updateText();
    })
    rect.on('transform', function () {
      updateText();
    });

   function updateText() {
     var pos = rect.getClientRect();
      var lines = [
        'x: ' + rect.x(),
        'y: ' + rect.y(),
        'rotation: ' + rect.rotation(),
        'width: ' + rect.width(),
        'height: ' + rect.height(),
        'scaleX: ' + rect.scaleX(),
        'scaleY: ' + rect.scaleY(),
        'client: ' + pos.x + ', ' + pos.y
      ];
     text.text(lines.join('\n'));
    
     // use rect2 to give a view on what is happening as we translate
     rect2.position({x: pos.x, y: pos.y});
     rect2.width(pos.width);
     rect2.height(pos.height);
     
      layer.batchDraw();
    }

layer.draw()
stage.draw()

// check if the rects overlap
function intersectRect(kr1, kr2) {
  var r1 = makeGeomRect(kr1, 0); // add left & right properties
  var r2 = makeGeomRect(kr2, 10);
  
  return !(r2.left <= r1.left && 
           r2.right > r1.right && 
           r2.top < r1.top &&
           r2.bottom > r1.bottom);
}
  

// make a handier rect - takes a rect with x, y, width, height and gives it left and right 
function makeGeomRect (r, padding){
  
  var out = {
    left: r.x + padding,
    right: r.x + r.width - padding,
    top: r.y + padding,
    bottom: r.y + r.height - padding    
  }
  return out;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.6.0/konva.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-editor">
  <div id="canvas-container"></div>
</div>

全屏运行摘要以查看全部荣耀

如何为Shape设置所需的clientRect x和y？

1 个答案: