KineticJS-具有連接的可拖動形狀
[英]KineticJS - draggable shape with connections
問題描述
我對KineticJS相當陌生，並且在可拖動形狀（圓形）和直線之間存在問題，該直線將這種形狀與另一個形狀連接起來。 移動可拖動形狀后，我無法重繪線條。 也許你們之一能給我提示。
這是我的代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="kinetic.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<style type="text/css">
html, body {
font-family: 'Open Sans Condensed', Arial, sans-serif;
font-size: 14px;
background: #EFEFEF;
width: 100%;
height: 100%;
}
h1 {
text-align: center;
font-size: 30px;
}
#canvas {
display: block;
background: white;
border: 1px solid #CCC;
margin: 50px auto;
width: 700px;
height: 500px;
}
</style>
</head>
<body>
<h1>kinetic.js test</h1>
<div id="canvas"></div>
<script defer="defer">
/**
* get circle center coordinates
*
* @desc gets coordinates of circle center
* @param shapeId - id of circle
* @returns {object} - object with x and y coordinates
*/
function getCircleCenterCoordinates(shapeId) {
var shape = getShapeById(shapeId);
if(typeof shape == 'object') {
return {x: shape.shape.attrs.x, y: shape.shape.attrs.y}
}
}
/**
* get shape by id
*
* @desc searches for given shape id and returns the matching
* @param shapeId - id of the circle
* @returns {*}
*/
function getShapeById(shapeId) {
var result = jQuery.grep(shapes, function(e) { return e.id == shapeId; });
if(result.length == 1) {
return result[0];
} else {
return null;
}
}
/**
* draw
*
* @desc draw shapes
* @retuns {void}
*/
function draw() {
// add shapes to the layer and register event listeners
for(var i = 0; i < shapes.length; i++) {
var shapeObj = shapes[i];
// add shape to layer
circleLayer.add(shapeObj.shape);
// register event listeners
for(var n = 0; n < shapeObj.events.length; n++) {
var eventObj = shapeObj.events[n];
shapeObj.shape.on(eventObj.type, eventObj.callback);
}
// draw connections
for(var m = 0; m < shapeObj.connections.length; m++) {
var connectionObj = shapeObj.connections[m];
// get ids
var fromId = shapeObj.id;
var toId = connectionObj.to;
// check if connection is already drawn
if(fromId > toId) {
// do not draw it again
continue;
}
// get coordinates
var fromCoordinatesObj = getCircleCenterCoordinates(fromId);
var toCoordinatesObj = getCircleCenterCoordinates(toId);
// check coordinates
if(typeof fromCoordinatesObj != 'object' || typeof toCoordinatesObj != 'object') {
// was not able to get valid coordinates
continue;
}
// update / set line points for this connection
connectionObj.line.attrs.points = [fromCoordinatesObj.x, fromCoordinatesObj.y, toCoordinatesObj.x, toCoordinatesObj.y];
// add line to layer
connectorLayer.add(connectionObj.line);
}
}
// add the layers to the stage
stage.add(connectorLayer);
stage.add(circleLayer);
}
/**
* init shapes and layers
* -------------------------------------------------------------------------------------------------------
*/
// create stage
var stage = new Kinetic.Stage({
container: 'canvas',
width: 700,
height: 500
});
// create layers
var circleLayer = new Kinetic.Layer();
var connectorLayer = new Kinetic.Layer();
// define shapes
var shapes = [
{
id: 1001,
label: 'me',
shape: new Kinetic.Circle({
x: stage.getWidth() / 2 - 200,
y: stage.getHeight() / 2 + 100,
radius: 70,
fill: '#DDD',
stroke: '#EFEFEF',
strokeWidth: 10,
draggable: true
}),
events: [
{type: 'mouseover', callback: function() { console.log('over 1');}}
],
connections: [
{to: 2001, line: new Kinetic.Line({stroke: '#333', strokeWidth: 2})},
{to: 3001, line: new Kinetic.Line({stroke: '#333', strokeWidth: 2})},
{to: 4001, line: new Kinetic.Line({stroke: '#333', strokeWidth: 2})}
]
},
{
id: 2001,
label: 'you',
shape: new Kinetic.Circle({
x: stage.getWidth() / 2 + 200,
y: stage.getHeight() / 2 + 100,
radius: 70,
fill: '#DDD',
stroke: '#EFEFEF',
strokeWidth: 10,
draggable: true
}),
events: [
{type: 'mouseover', callback: function() { console.log('over 2');}}
],
connections: [
{to: 1001, line: new Kinetic.Line({stroke: '#333', strokeWidth: 2})},
{to: 3001, line: new Kinetic.Line({stroke: '#333', strokeWidth: 2})},
{to: 4001, line: new Kinetic.Line({stroke: '#333', strokeWidth: 2})}
]
},
{
id: 3001,
label: 'her',
shape: new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2 - 100,
radius: 70,
fill: '#DDD',
stroke: '#EFEFEF',
strokeWidth: 10,
draggable: true
}),
events: [
{type: 'mouseover', callback: function() { console.log('over 3');}}
],
connections: [
{to: 1001, line: new Kinetic.Line({stroke: '#333', strokeWidth: 2})},
{to: 2001, line: new Kinetic.Line({stroke: '#333', strokeWidth: 2})}
]
},
{
id: 4001,
label: 'his',
shape: new Kinetic.Circle({
x: 100,
y: 150,
radius: 70,
fill: '#DDD',
stroke: '#EFEFEF',
strokeWidth: 10,
draggable: true
}),
events: [
{type: 'mouseover', callback: function() { console.log('over 4');}},
{type: 'dragend', callback: function() { console.log(this.getPosition()); console.log(shapes[3]); }}
],
connections: [
{to: 1001, line: new Kinetic.Line({stroke: '#333', strokeWidth: 2})},
{to: 2001, line: new Kinetic.Line({stroke: '#333', strokeWidth: 2})}
]
}
];
// draw shapes
draw();
</script>
1 個解決方案
解決方案1
0 已采納 2014-05-25 06:18:09
這是保持2個節點與Kinetic.Line連接的方法。
創建一個Kinetic.Line，其點設置為連接要連接的2個節點。
在您希望連接的2個節點上偵聽dragmove事件。
在任一節點的拖動移動中，重置連接線的點以再次連接到2個節點。
像這樣
NodeA.on('dragmove',function(){
connectorAB.points([NodeA.x(),nodeA.y(),nodeB.x(),nodeB.y()]);
layer.draw();
});
// same thing for NodeB
在KineticJS的dragend事件中動畫化和移動可拖動形狀
[英]Animating and moving a draggable shape in KineticJS's dragend event
如何檢測可拖動圓形與KineticJS重疊另一個圓形的時間？
[英]How can I detect when a draggable circle shape overlaps another circle shape with KineticJS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.