Javascript 拉斐尔没有拖动
我正在制作一个拉斐尔椭圆,带有圆形大小调整器,像这样Javascript 拉斐尔没有拖动,javascript,svg,raphael,Javascript,Svg,Raphael,我正在制作一个拉斐尔椭圆,带有圆形大小调整器,像这样 // Ellipse initially positioned in middle of image with dimensions 100x100 var horizRadius = 50, verticalRadius = 50, x0 = (imageWidth)/2-horizRadius, y0 = (imageHeight)/2-verticalRadius,
// Ellipse initially positioned in middle of image with dimensions 100x100
var horizRadius = 50,
verticalRadius = 50,
x0 = (imageWidth)/2-horizRadius,
y0 = (imageHeight)/2-verticalRadius,
resizerRadius=5;
// Make ellipse with top, bottom, left and right resizer handles
Canvas.ellipse = Canvas.paper.ellipse(x0, y0, horizRadius, verticalRadius);
Canvas.topResizer = Canvas.paper.circle(parseInt(x0), parseInt(y0)-verticalRadius, resizerRadius);
Canvas.bottomResizer = Canvas.paper.circle(parseInt(x0), parseInt(y0)+verticalRadius, resizerRadius);
Canvas.leftResizer = Canvas.paper.circle(parseInt(x0)-horizRadius, parseInt(y0), resizerRadius);
Canvas.rightResizer = Canvas.paper.circle(parseInt(x0)+horizRadius, parseInt(y0), resizerRadius);
// Make empty ellipse with red border
Canvas.ellipse.attr({stroke: 'red', fill: 'red'});
Canvas.ellipse.attr({"fill-opacity": 0.0, "stroke-opacity": 1.0});
Canvas.ellipse.attr({"stroke-width": 3});
// Get visible handle for resizing
Canvas.topResizer.attr({fill:'#ccff00'});
Canvas.bottomResizer.attr({fill:'#ccff00'});
Canvas.leftResizer.attr({fill:'#ccff00'});
Canvas.rightResizer.attr({fill:'#ccff00'});
// Drag the whole rectangle when the user clicks inside the rectangle and holds down the key
Canvas.ellipse.drag(
function(dx, dy, x, y){
this.attr({x: this.ox+dx, y: this.oy+dy});
Canvas.topResizer.attr({cx: this.tox+dx, cy: this.toy+dy});
Canvas.bottomResizer.attr({cx: this.box+dx, cy: this.boy+dy});
Canvas.leftResizer.attr({cx: this.lox+dx, cy: this.loy+dy});
Canvas.rightResizer.attr({cx: this.rox+dx, cy: this.roy+dy});
},
function(){
this.ox = this.attr('x');
this.oy = this.attr('y');
this.tox = Canvas.topResizer.attr('cx');
this.toy = Canvas.topResizer.attr('cy');
this.box = Canvas.bottomResizer.attr('cx');
this.boy = Canvas.bottomResizer.attr('cy');
this.lox = Canvas.leftResizer.attr('cx');
this.loy = Canvas.leftResizer.attr('cy');
this.rox = Canvas.rightResizer.attr('cx');
this.roy = Canvas.rightResizer.attr('cy');
}
);
一切看起来都很好。我在图像中间有一个圆圈,调整圈在正确的位置。
然后我试着像这样拖动整个结构
// Ellipse initially positioned in middle of image with dimensions 100x100
var horizRadius = 50,
verticalRadius = 50,
x0 = (imageWidth)/2-horizRadius,
y0 = (imageHeight)/2-verticalRadius,
resizerRadius=5;
// Make ellipse with top, bottom, left and right resizer handles
Canvas.ellipse = Canvas.paper.ellipse(x0, y0, horizRadius, verticalRadius);
Canvas.topResizer = Canvas.paper.circle(parseInt(x0), parseInt(y0)-verticalRadius, resizerRadius);
Canvas.bottomResizer = Canvas.paper.circle(parseInt(x0), parseInt(y0)+verticalRadius, resizerRadius);
Canvas.leftResizer = Canvas.paper.circle(parseInt(x0)-horizRadius, parseInt(y0), resizerRadius);
Canvas.rightResizer = Canvas.paper.circle(parseInt(x0)+horizRadius, parseInt(y0), resizerRadius);
// Make empty ellipse with red border
Canvas.ellipse.attr({stroke: 'red', fill: 'red'});
Canvas.ellipse.attr({"fill-opacity": 0.0, "stroke-opacity": 1.0});
Canvas.ellipse.attr({"stroke-width": 3});
// Get visible handle for resizing
Canvas.topResizer.attr({fill:'#ccff00'});
Canvas.bottomResizer.attr({fill:'#ccff00'});
Canvas.leftResizer.attr({fill:'#ccff00'});
Canvas.rightResizer.attr({fill:'#ccff00'});
// Drag the whole rectangle when the user clicks inside the rectangle and holds down the key
Canvas.ellipse.drag(
function(dx, dy, x, y){
this.attr({x: this.ox+dx, y: this.oy+dy});
Canvas.topResizer.attr({cx: this.tox+dx, cy: this.toy+dy});
Canvas.bottomResizer.attr({cx: this.box+dx, cy: this.boy+dy});
Canvas.leftResizer.attr({cx: this.lox+dx, cy: this.loy+dy});
Canvas.rightResizer.attr({cx: this.rox+dx, cy: this.roy+dy});
},
function(){
this.ox = this.attr('x');
this.oy = this.attr('y');
this.tox = Canvas.topResizer.attr('cx');
this.toy = Canvas.topResizer.attr('cy');
this.box = Canvas.bottomResizer.attr('cx');
this.boy = Canvas.bottomResizer.attr('cy');
this.lox = Canvas.leftResizer.attr('cx');
this.loy = Canvas.leftResizer.attr('cy');
this.rox = Canvas.rightResizer.attr('cx');
this.roy = Canvas.rightResizer.attr('cy');
}
);
当我尝试拖动椭圆时,大小调整器圆会按其应该的方式移动,但椭圆不会移动。我发现了问题所在。定义椭圆中心的属性是(cx,cy),而不是(x,y)。所以前一个函数中的第一个调用应该是
this.attr({cx: this.ox+dx, cy: this.oy+dy});
而后者中的前两个调用应该是
this.ox = this.attr('cx');
this.oy = this.attr('cy');