当移动其他对象时，KineticJS动态更改对象的位置 [英] KineticJS dynamically change the position of an object when other object is moved
问题描述
我在舞台上有一条垂直线和一条水平线，以及一个圆，当我移动任一条线时，试图将圆的中心保持在两条线的对应位置上，这是我的脚本不起作用:
I have a vertical and a horizontal lines and a circle on my stage, trying to keep the circle centered on the corssoing of the two lines when I move either line, here is my script that does not work:
var cy = 512;
var cx = 512;
var gy = 0;
var gx = 0;
var stage1 = new Kinetic.Stage({
container: 'container',
width: 1024,
height: 1024
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({
x: cx + gx,
y: cy + gy,
radius: 140,
stroke: '#00ffff',
strokeWidth: 4,
opacity: 0.5
});
circle.add(circle1);
var GreenLine1 = new Kinetic.Line({
points: [0, 512, 1024, 512],
stroke: 'green',
strokeWidth: 4,
lineCap: 'round',
lineJoin: 'round',
opacity: 0.3
});
var BlueLine1 = new Kinetic.Line({
points: [512, 0, 512, 1024],
stroke: '#0080c0',
strokeWidth: 4,
lineCap: 'round',
lineJoin: 'round',
opacity: 0.5
});
var bgroup1 = new Kinetic.Group({
draggable: true,
dragBoundFunc: function (pos) {
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
var ggroup1 = new Kinetic.Group({
draggable: true,
dragBoundFunc: function (pos) {
return {
x: this.getAbsolutePosition().x,
y: pos.y
}
}
});
bgroup1.add(BlueLine1);
ggroup1.add(GreenLine1);
layer.add(bgroup1);
layer.add(ggroup1);
stage1.add(circle);
stage1.add(layer);
BlueLine1.on('mouseover', function () {
document.body.style.cursor = 'e-resize';
});
BlueLine1.on('mouseout', function () {
document.body.style.cursor = 'default';
});
GreenLine1.on('mouseover', function () {
document.body.style.cursor = 'n-resize';
});
GreenLine1.on('mouseout', function () {
document.body.style.cursor = 'default';
});
ggroup1.on('dragend', function (event) {
var gy = ggroup1.getPosition().y;
circle.draw();
});
ggroup1.on('dragstart', function (event) {
circle1.moveTo(ggroup1);
});
bgroup1.on('dragstart', function (event) {
circle1.moveTo(bgroup1);
});
bgroup1.on('dragend', function (event) {
var gx = bgroup1.getPosition().x;
circle.draw();
});
感谢您的建议，在此先感谢
I would appreciate your suggetions, thanks in advance
推荐答案
使圆圈保持十字准线
我可以建议您使用一个更简单的代码版本吗?
May I suggest a simpler version of your code?
与其保持2个组并在2个组之间移动圆，不如仅对圆进行编码以在2条线的交点处自动重画自身.
Instead of maintaining 2 groups and moving the circle between the 2 groups, how about just coding the circle to automatically redraw itself at the intersection of the 2 lines.
因此，当用户移动GreenLine1或BlueLine1时，只需将circle1移至十字线"的交点即可.
So when the user moves your GreenLine1 or BlueLine1, just move your circle1 to the intersection of your "crosshairs".
首先，将一个自定义的drawFunc添加到您的circle1中，使它始终绘制在十字准线中:
First, add a custom drawFunc to your circle1 that causes it to always draw in the crosshairs:
drawFunc: function(canvas) {
var context = canvas.getContext();
var centerX=BlueLine1.getPosition().x;
var centerY=GreenLine1.getPosition().y;
context.beginPath();
context.arc(centerX, centerY, this.getRadius(), 0, 2 * Math.PI, false);
context.lineWidth = this.getStrokeWidth();
context.strokeStyle = this.getStroke();
context.stroke();
},
然后，每当用户拖动任一行时，只需触发circle1即可重绘自身:
Then, whenever the user drags either line, just trigger circle1 to redraw itself:
// keep circle in center of crosshairs
stage1.getDragLayer().afterDraw(function() {
layer.draw();
});
这是代码和小提琴: http://jsfiddle.net/m1erickson/cgF8y/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
</style>
<script>
$(function(){
function init(){
var cy = 512/2;
var cx = 512/2;
var gy = 0;
var gx = 0;
var stage1 = new Kinetic.Stage({
container: 'container',
width: 1024/2,
height: 1024/2
});
var layer = new Kinetic.Layer();
stage1.add(layer);
var circle1 = new Kinetic.Circle({
drawFunc: function(canvas) {
var context = canvas.getContext();
var centerX=BlueLine1.getPosition().x;
var centerY=GreenLine1.getPosition().y;
context.beginPath();
context.arc(centerX, centerY, this.getRadius(), 0, 2 * Math.PI, false);
context.lineWidth = this.getStrokeWidth();
context.strokeStyle = this.getStroke();
context.stroke();
},
x: cx + gx,
y: cy + gy,
radius: 140/2,
stroke: '#00ffff',
strokeWidth: 4,
opacity: 0.5
});
layer.add(circle1);
var GreenLine1 = new Kinetic.Line({
points: [0, 512/2, 1024/2, 512/2],
stroke: 'green',
strokeWidth: 4,
lineCap: 'round',
lineJoin: 'round',
opacity: 0.3,
draggable:true
});
layer.add(GreenLine1);
var BlueLine1 = new Kinetic.Line({
points: [512/2, 0, 512/2, 1024/2],
stroke: '#0080c0',
strokeWidth: 4,
lineCap: 'round',
lineJoin: 'round',
opacity: 0.5,
draggable:true
});
layer.add(BlueLine1);
// keep circle in center of crosshairs
stage1.getDragLayer().afterDraw(function() {
layer.draw();
});
BlueLine1.on('mouseover', function () {
document.body.style.cursor = 'e-resize';
});
BlueLine1.on('mouseout', function () {
document.body.style.cursor = 'default';
});
GreenLine1.on('mouseover', function () {
document.body.style.cursor = 'n-resize';
});
GreenLine1.on('mouseout', function () {
document.body.style.cursor = 'default';
});
layer.draw();
} // end init();
init();
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
这篇关于当移动其他对象时，KineticJS动态更改对象的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
