我想绘制一条弧。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?
您的错误是将形状偏移与形状位置混淆。您正在将偏移量值应用于位置和偏移量。
下面是一个有效的代码段,显示了“不”使用偏移值移动原点以及同时移动位置和偏移的效果。
如果您试图绘制圆弧以使其成为半圆,那么您需要对两个圆弧使用相同的位置,并删除offset参数。
如果不是问题,请进一步解释您要达到的目标。
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>