how to draw an arc with offset and rotation - konvajs

Question

I want to draw an arc。 the startAngle is 0， and the spanAngle is 90. the arc has an offset as 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
});
the position of arcoffsetRotate is changed which is not what I want. how can i change the startAngle without the center changed in this case?

Answer 1

Your mistake is confusing the shape offset in with the shape position. You are applying the offset value to the position AND the offset.
The difference is described here in the Konva docs.
Below is a working snippet that shows the effect of 'not' moving the origin with the offset values, and moving position and offset at same time.
If you are trying to draw the arcs so that they make a semi-circle, then you need to use the same position for both arcs, and remove the offset parameter.
If that is not the issue please explain further what you are trying to achieve.
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>