このように、円形のリサイザーを使用してラファエル楕円を作成しています。
// 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');
}
);
楕円をドラッグしようとすると、リサイザーの円は正常に動きますが、楕円は動きません。