Drag image on canvas
Added by Edward Hill about 15 years ago
Hi all,
is it possible in some way enable dragging on a image that created on canvas field:
{
PaintBrush_ *canv = new PaintBrush_(200, 200);
layout3->addWidget(canv);
canv->decorationStyle().setBorder(WBorder(WBorder::Solid));
container3->setLayout(layout3);
}
void PaintBrush_::paintEvent(WPaintDevice *paintDevice)
{
WPainter painter(paintDevice);
painter.setRenderHint(WPainter::Antialiasing);
painter.drawImage(20.0, 20.0, Wt::WPainter::Image("resources/awesome.jpg", 50, 50));
...
}
Thank you!
Replies (7)
RE: Drag image on canvas - Added by Edward Hill about 15 years ago
For me need develop drag-and-drop like this one http://developer.yahoo.com/yui/examples/dragdrop/dd-basic.html
What the methods and classes i must use to do it?
RE: Drag image on canvas - Added by Koen Deforche about 15 years ago
Hey Edward,
I think you'll want to implement this not using a canvas (if all you need are rectangles), but like YUI, using div's. You'll need a little bit of JavaScript to handle the dragging client-side.
The library does not contain an example that does this. Two places in the library may be interesting to understand how this is implemented for the WDialog (which can be moved around when clicking in the titlebar) and the WVirtualImage (for dragging around):
- WDialog.js lines 20-46 (showing almost exactly the JavaScript you need)
- WVirtualImage.C lines 56-94 (showing how to tie it into your C code)
Let us know if this clarifies it somewhat for you, or you need more help.
Regards,
koen
RE: Drag image on canvas - Added by Edward Hill almost 15 years ago
Hi,
>>I think you'll want to implement this not using a canvas...
No, it's strongly must be canvas, because between images will be lines, then this images will be possible drag and move also moves and lines between images.
Please, help answer me Wt can do this, and what the classes better for this task.
Thanx!
RE: Drag image on canvas - Added by Edward Hill almost 15 years ago
Sorry, my top message was not right parsed, this is right:
>>I think you'll want to implement this not using a canvas...
No, it's strongly must be canvas, because between images will be lines, then this images will be possible drag and move also moves and lines between images.
Please, help answer me Wt can do this, and what the classes better for this task.
Thanx!
RE: Drag image on canvas - Added by Thomas Suckow almost 15 years ago
Your going to need client side javascript. I have never tried anything like that with Wt.
But if I understand correctly you want to do something like http://slides.html5rocks.com/#slide24
RE: Drag image on canvas - Added by Wim Dumon almost 15 years ago
Usually it is pretty easy to interact between JS scripts an Wt. Use JSignal and JSlot, see also the examples/javascript folder in the Wt distribution.
For example, client-side widget moving in JS is something we've done in a project before. This required 50 lines of JavaScript glue, including the logic to tell the server that the object was moved. Using this method, the example that Thomas quoted (http://slides.html5rocks.com/#slide24) would be pretty easy to implement.
If you want to draw lines while moving the object, I think you have 2 choices:
- send position updates to the server while moving the object and redraw the lines in a canvas. Easier to implement (certainly cross-browser), but you'll have a server round-trip time. Did you consider to update the lines only after the user released the dragged object?
- draw the lines client-side in the JavaScript functions. This will be smoother, but you'll have to deal with the misery of cross-browser canvas drawing.
Wim.
RE: Drag image on canvas - Added by Edward Hill almost 15 years ago
Thank you Wim Dumon and Thomas Suckow!