Как я могу сделать, изображение движется? пользователь собирается взять его и переместить с помощью мыши Raphael Javascript - PullRequest
Новая
       1

Как я могу сделать, изображение движется? пользователь собирается взять его и переместить с помощью мыши Raphael Javascript

1 голос
/ 24 января 2011

это идея ..

я хочу поместить изображение ... и пользователь собирается переместить его, в любую его часть, сначала я использую изображение 

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

Теперь пользователь увидит изображение, с помощью мыши он возьмет его и переместит, как мне это сделать?...

с последним кодом, он не двигается, мне нужно, чтобы он двигался .. как мне это сделать?

1 Ответ

2 голосов
/ 24 января 2011

Изображения не имеют атрибутов cx cy, см. Спецификация SVG (Рафаэль использует 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);
...