我有以下代码,其中动态创建了一个形状。在单击形状时,会生成箭头,可以使用箭头上的控制器调整其大小。
现在当我拖动形状时,我需要移动箭头的起点。但由于箭头位于不同的层,我无法引用它。怎么办呢?
示例代码:
var stage = new Konva.Stage({
container: 'canvas', // id of container <div>
width: 500,
height:300
});
var layer = new Konva.Layer();
jQuery("#add-shape").click(function(){
addShape();
});
var addShape = function(){
var parentContainer = new Konva.Rect({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
width: 200,
height: 60,
cornerRadius: 10,
fill: '#ccc'
});
var smallCircle = new Konva.Circle({
x: stage.getWidth() / 2 + 200,
y: stage.getHeight() / 2 + 30,
radius: 15,
fill: "#F2784B",
stroke: "white",
strokeWidth: 2
});
smallCircle.on('click', function() {
console.log(this.getX(),this.getY());
var mousePos = stage.getPointerPosition();
addArrow(mousePos.x,mousePos.y,layer);
});
layer.on('dragstart dragmove', function() {
//change the starting point of arrow here
});
layer.add(parentContainer);
layer.add(smallCircle);
layer.draggable('true');
stage.add(layer);
}
var addArrow = function(arrowX,arrowY){
var connectorLayer = new Konva.Layer();
var connector = new Konva.Arrow({
points: [arrowX,arrowY,arrowX+20,arrowY],
pointerLength: 4,
pointerWidth: 4,
fill: 'black',
stroke: 'black',
strokeWidth: 2
});
var arrowHead = new Konva.Circle({
x: arrowX+25,
y: arrowY,
radius: 5,
fill: "#F2784B",
stroke: "white",
strokeWidth: 1
});
arrowHead.on('dragstart dragmove', function() {
connector.setPoints([
arrowX,
arrowY,
arrowHead.getX(),
arrowHead.getY()
]);
});
arrowHead.draggable('true');
connectorLayer.add(arrowHead);
connectorLayer.add(connector);
stage.add(connectorLayer);
}
<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-shape">
Add shape
</button>
<div id="canvas">
</div>
答案 0 :(得分:5)
当您需要从其他图层获取形状时,您只需按以下方式调用layer.getIntersection(mousePositionObject)
:
var stage = new Konva.Stage({
container: 'canvas', // id of container <div>
width: 500,
height:300
});
var layer = new Konva.Layer();
jQuery("#add-shape").click(function(){
addShape();
});
var connectorLayer = new Konva.Layer();
var addShape = function(){
var parentContainer = new Konva.Rect({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
width: 200,
height: 60,
cornerRadius: 10,
fill: '#ccc'
});
var smallCircle = new Konva.Circle({
x: stage.getWidth() / 2 + 200,
y: stage.getHeight() / 2 + 30,
radius: 15,
fill: "#F2784B",
stroke: "white",
strokeWidth: 2
});
smallCircle.on('click', function() {
console.log(this.getX(),this.getY());
var mousePos = stage.getPointerPosition();
addArrow(mousePos.x,mousePos.y);
});
layer.on('dragstart dragmove', function() {
//change the starting point of arrow here
var mousePosition = stage.getPointerPosition();
var arrow = connectorLayer.getIntersection();
arrow.x(mousePosition.x);
arrow.y(mousePosition.y);
});
layer.add(parentContainer);
layer.add(smallCircle);
layer.draggable('true');
stage.add(layer);
};
var addArrow = function(arrowX,arrowY){
var connector = new Konva.Arrow({
points: [arrowX,arrowY,arrowX+20,arrowY],
pointerLength: 4,
pointerWidth: 4,
fill: 'black',
stroke: 'black',
strokeWidth: 2
});
var arrowHead = new Konva.Circle({
x: arrowX+25,
y: arrowY,
radius: 5,
fill: "#F2784B",
stroke: "white",
strokeWidth: 1
});
arrowHead.on('dragstart dragmove', function() {
connector.setPoints([
arrowX,
arrowY,
arrowHead.getX(),
arrowHead.getY()
]);
});
arrowHead.draggable('true');
connectorLayer.add(arrowHead);
connectorLayer.add(connector);
stage.add(connectorLayer);
};
<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-shape">
Add shape
</button>
<div id="canvas">
</div>