[rob@volleyhollix.com]

Hi,

I’m developing for an iPhone.

I’d like my users to move and drag around clipart images (NOT circles or squares) within a panel using.

How do I do this?

Thanks,

Robert

[WaylandDavis]

Rob,

Did you go to the Raphael.js site? They have an image shape just like the image tile in MobiOne. Using the same methods that I showed you in my sample code, you can drag them around too.

[rob@volleyhollix.com]

Wildwex,

Yes I went to their web site but couldn’t find anything. Spent a couple of days looking there.

Can you please direct me to the exact site or function or attribute?

Thanks,

[rob@volleyhollix.com]

Wildwex,

I tried using the paper.image as oppose to the paper.circle in the same method (example) you showed me.

It did display the image on the panel but it cannot be moved or dragged around.

Below is the code:

phoneui.documentReadyHandler = function()
{
paper = new Raphael(document.getElementById(‘m1-dragtest-panel1’), 320, 410);
mypset = paper.set(); // creates a paper set of elements to act on later in .drag

i = paper.image(“c:\mypicture1.gif”, 200, 125, 100, 100);
mypset.push(i);

r = paper.circle(50, 50, 20).attr({fill: “red”, stroke: “none”, opacity: 1});
mypset.push(r);
g = paper.circle(50, 100, 20).attr({fill: “blue”, stroke: “none”, opacity: 1});
mypset.push(g);
b = paper.circle(50, 150, 20).attr({fill: “green”, stroke: “none”, opacity: 1});
mypset.push(b);
p = paper.circle(50, 200, 20).attr({fill: “yellow”, stroke: “none”, opacity: 1});
mypset.push(p);

var start = function () {
this.ox = this.attr(“cx”);
this.oy = this.attr(“cy”);
this.animate({r: 50, opacity: .25}, 500, “>”);
}

var move = function (dx, dy) {
this.attr({cx: this.ox + dx, cy: this.oy + dy});
}

var up = function () {
this.animate({r: 20, opacity: 1}, 500, “>”);
};

mypset.drag(move, start, up);

}

var mypset;
​

[WaylandDavis]

This code should let you use an image and drag it. Not sure about .gif, but .jpg and .png work OK. Best if background around main portion of image is transparent.

paper = new Raphael(document.getElementById(‘m1-dragtest-bu-panel1’), 320, 410);
mypset = paper.set(); // creates a paper set of elements to act on later in .drag
myimgpset = paper.set(); // creates a paper set of elements for dragging images…
r = paper.circle(50, 50, 20).attr({fill: “red”, stroke: “none”, opacity: 1});
mypset.push(r);
g = paper.circle(50, 100, 20).attr({fill: “blue”, stroke: “none”, opacity: 1});
mypset.push(g);
b = paper.circle(50, 150, 20).attr({fill: “green”, stroke: “none”, opacity: 1});
mypset.push(b);
p = paper.circle(50, 200, 20).attr({fill: “yellow”, stroke: “none”, opacity: 1});
mypset.push(p);
i = paper.image(“images/flower.png”, 200, 125, 50, 50);
myimgpset.push(i);

var start = function () {
this.ox = this.attr(“cx”);
this.oy = this.attr(“cy”);
//this.animate({r: 50, opacity: .25}, 500, “>”);
}
var move = function (dx, dy) {
this.attr({cx: this.ox + dx, cy: this.oy + dy});
}
var up = function () {
//this.animate({r: 20, opacity: 1}, 500, “>”);
};
// Note that image is rectangular, so it doesn’t have “cx” or “cy” which is dragging from center.
var istart = function () {
this.ox = this.attr(“x”);
this.oy = this.attr(“y”);
//this.animate({r: 50, opacity: .25}, 500, “>”);
}
var imove = function (dx, dy) {
this.attr({x: this.ox + dx, y: this.oy + dy});
}
var iup = function () {
//this.animate({r: 20, opacity: 1}, 500, “>”);
};
mypset.drag(move, start, up); // use for the circles
myimgpset.drag(imove, istart, iup); // use for rectangles and images.

[WaylandDavis]

This code should let you use an image and drag it. Not sure about .gif, but .jpg and .png work OK. Best if background around main portion of image is transparent.

paper = new Raphael(document.getElementById(‘m1-dragtest-bu-panel1’), 320, 410);
mypset = paper.set(); // creates a paper set of elements to act on later in .drag
myimgpset = paper.set(); // creates a paper set of elements for dragging images…
r = paper.circle(50, 50, 20).attr({fill: “red”, stroke: “none”, opacity: 1});
mypset.push(r);
g = paper.circle(50, 100, 20).attr({fill: “blue”, stroke: “none”, opacity: 1});
mypset.push(g);
b = paper.circle(50, 150, 20).attr({fill: “green”, stroke: “none”, opacity: 1});
mypset.push(b);
p = paper.circle(50, 200, 20).attr({fill: “yellow”, stroke: “none”, opacity: 1});
mypset.push(p);
i = paper.image(“images/flower.png”, 200, 125, 50, 50);
myimgpset.push(i);

var start = function () {
this.ox = this.attr(“cx”);
this.oy = this.attr(“cy”);
//this.animate({r: 50, opacity: .25}, 500, “>”);
}
var move = function (dx, dy) {
this.attr({cx: this.ox + dx, cy: this.oy + dy});
}
var up = function () {
//this.animate({r: 20, opacity: 1}, 500, “>”);
};
// Note that image is rectangular, so it doesn’t have “cx” or “cy” which is dragging from center.
var istart = function () {
this.ox = this.attr(“x”);
this.oy = this.attr(“y”);
//this.animate({r: 50, opacity: .25}, 500, “>”);
}
var imove = function (dx, dy) {
this.attr({x: this.ox + dx, y: this.oy + dy});
}
var iup = function () {
//this.animate({r: 20, opacity: 1}, 500, “>”);
};
mypset.drag(move, start, up); // use for the circles
myimgpset.drag(imove, istart, iup); // use for rectangles and images.

[rob@volleyhollix.com]

Thanks Wildwex…that works!

How do I reference an image that’s on my Mobione app (not on my hard drive)? the image is named “image1” and it’s on panel2 of my dragtest app.

I tried the code below but it does not work.

i = paper.image(‘m1-dragtest-panel2-image1’, 200, 125, 100, 100);
myimgpset.push(i);

[Author]

Posts