如何绘制带有偏移和旋转的圆弧

Question

我要画一个圆弧。startAngle 为 0，spanAngle 为 90。圆弧的偏移量为 offset{x:-50，y：50} 。

var arcoffset = new Konva.Arc({
        x: 200 - 50,
        y: 200 + 50,
        innerRadius: 70,
        outerRadius: 70,
        angle: 90,
        fill: 'yellow',
        stroke: 'green',
        strokeWidth: 4,
        offset: {
            x: -50,
            y: 50
        }
    });
    var arcoffsetRotate = new Konva.Arc({
        x: 200 - 50,
        y: 200 + 50,
        innerRadius: 70,
        outerRadius: 70,
        angle: 90,
        fill: 'yellow',
        stroke: 'blue',
        strokeWidth: 4,
        offset: {
            x: -50,
            y: 50
        },
        rotationDeg:-90
    });

arcoffsetRotate 的位置发生了变化，这不是我想要的。在这种情况下，如何在不改变中心的情况下更改 startAngle？

Answer 1

您的错误是将形状偏移与形状位置混淆。您正在将偏移值应用于位置和偏移量。

区别描述here in the Konva docs.

下面是一个工作的sn-p，它显示了'不'用偏移值移动原点的效果，同时移动位置和偏移量。

如果您尝试绘制弧线以使它们形成半圆，则需要为两条弧线使用相同的位置，并删除偏移参数。

如果这不是问题，请进一步说明您要达到的目标。

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


function drawArc(pos, posOffset, offset, color, deg) {

var arc = new Konva.Arc({
        x: pos.x - posOffset.x,
        y: pos.y + posOffset.y,
        innerRadius: 70,
        outerRadius: 70,
        angle: 90,
        stroke: color,
        strokeWidth: 4,
        offset: {
            x: offset.x,
            y: offset.y
        },
        rotationDeg: deg
    });

var r = new Konva.Rect({
  x: pos.x, // + offset.x,
  y: pos.y, // + offset.y,
  width: arc.size().width,
  height: arc.size().height,
  stroke: color,
  strokeWidth: 1,
         offset: {
            x: offset.x,
            y: offset.y
        },
  rotationDeg:deg        
 })


 var c = new Konva.Circle({
  x: pos.x - posOffset.x,
  y: pos.y + posOffset.y,
  radius: 5,
  fill: color,
         offset: {
            x: offset.x,
            y: offset.y
        },  
  rotationDeg:deg   
 })
 

 
 layer.add(arc)
 layer.add(r)
 layer.add(c)
}


var left = 0
stage.draw();

$('#left').on('click', function(){

  layer.destroyChildren();
    
  drawArc({x:200, y:200}, {x:0, y:0}, {x:0, y:0}, 'cyan', 0)

  left = left - 1
  var offset =  {x:left, y:0}
  var posOffset = ($('#chk').prop('checked') ?  {x:left, y:0} : {x:0, y:0}) 

  drawArc({x:200, y:200}, posOffset, offset, 'magenta', -90)
  stage.draw();

})

$('#right').on('click', function(){

  layer.destroyChildren();

  drawArc({x:200, y:200}, {x:0, y:0}, {x:0, y:0}, 'cyan', 0)

  left = left + 1
  drawArc({x:200, y:200}, {x:left, y:0}, 'magenta', -90)
  stage.draw();

})


$('#reset').on('click', function(){

  drawArc({x:200, y:200}, {x:0, y:0}, {x:0, y:0}, 'cyan', 0)
  drawArc({x:200, y:200}, {x:0, y:0}, {x:0, y:0}, 'magenta', -90)
  stage.draw();
  
})

$('#reset').trigger('click')

#container {
width: 500px;
height: 500px;
background-color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/3.2.5/konva.min.js"></script>


<button id='reset'>Reset</button>
<button id='left'>Move offset 1 pixel to left</button>
<button id='right'>Move offset 1 pixel to right</button>
<input type='checkbox' id='chk'/><label for='chk'> Apply offset to position</label>
<div id='container'>





</div>