javascript - 我怎么办，图像有移动？用户将拿走它并用鼠标移动它 raphael javascript

Question

这就是想法..

我想放一张图片...然后用户要移动它，在他想要的任何部分，首先我使用图片

var R = Raphael("hello_world", 800, 800),
elipse = R.image("mioo.jpg",100,200,100,300);

现在用户将看到图像，他将使用鼠标移动它，我该怎么做？ ...

使用最后的代码，它不会移动，我需要它移动..我该怎么做？

Answer 1

图像没有 cx cy 属性，请参阅 SVG Specification (Rafael 使用 SVG 渲染图形)你必须使用 x 和 y 属性。

up = function () {
    // restoring state
    this.attr({opacity: .5});
};
var start = function () {
    // storing original coordinates
    this.ox = this.attr("x");
    this.oy = this.attr("y");
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({x: this.ox + dx, y: this.oy + dy});
},
up = function () {
    // restoring state
    this.attr({opacity: .5});
};

或使用转换:

elipse.tx = 0;
elipse.ty = 0;
var start = function () {
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    //This is quick hack to restore previous position - because translate use 
    //relative transformation
    this.translate(-this.trx, -this.try); 
    this.translate(dx, dy);
    this.tx = dx;
    this.ty = dy;
},
up = function () {
    this.attr({opacity: .5});
};
elipse.drag(move, start, up);