这是我当前的状态:http://jsfiddle.net/andrewgable/Xr6mc/
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var lineLayer = new Kinetic.Layer();
var flowerLayer = new Kinetic.Layer();
var centerLayer = new Kinetic.Layer();
var flower = new Kinetic.Group({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2
});
// build stem
var stem = new Kinetic.Line({
strokeWidth: 10,
stroke: 'green',
points: [{
x: flower.getX(),
y: flower.getY()
}, {
x: stage.getWidth() / 2,
y: stage.getHeight() + 10
}]
});
// build center
var center = new Kinetic.Circle({
x: 0,
y: 0,
radius: 6,
fill: 'black',
draggable: true,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2
});
center.on('mouseover', function() {
this.setFill('orange');
flowerLayer.draw();
document.body.style.cursor = 'pointer';
});
center.on('mouseout', function() {
this.setFill('black');
flowerLayer.draw();
document.body.style.cursor = 'default';
});
stage.on('mouseup', function() {
document.body.style.cursor = 'default';
});
lineLayer.add(stem);
flowerLayer.add(flower);
centerLayer.add(center);
stage.add(lineLayer);
stage.add(flowerLayer);
stage.add(centerLayer);
// keep step and flower position in sync with center
center.on('dragstart', (function() {
center.getLayer().afterDraw(function() {
stem.attrs.points[0] = center.getPosition();
flower.setPosition(center.getPosition());
lineLayer.draw();
flowerLayer.draw();
});
}));
</script>
</body>
</html>
只是想使这条线可拖动(简单，将其设置为拖动)。
我希望这条线有两个 anchor ，都可以向任何方向拖动。
如您所见，我只需要确定一个“ anchor ”。
如果 anchor 不四处移动，我无法弄清楚使这成为可能的逻辑..
感谢您的帮助。
最佳答案
可以将相同的逻辑直接从此页面复制到您想要的内容。您可以只使用 buildAnchors 函数为形状创建 anchor ，并使用 redraw() 更新函数；
function buildAnchor(layer, x, y) {
var anchor = new Kinetic.Circle({
x: x,
y: y,
radius: 8,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
draggable: true
});
// add hover styling
anchor.on('mouseover', function() {
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
anchor.on('mouseout', function() {
document.body.style.cursor = 'default';
this.setStrokeWidth(2);
layer.draw();
});
layer.add(anchor);
return anchor;
}
关于javascript - 带有两个 anchor 的线 kineticjs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14299766/