Watch, Follow, &
Connect with Us

For forums, blogs and more please visit our
Developer Tools Community.


Welcome, Guest
Guest Settings
Help

Thread: Disabling Image Dragging to Suport Canvas Drawing


This question is not answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 7 - Last Post: Oct 5, 2016 1:56 AM Last Post By: Daniel Fields
Daniel Fields

Posts: 622
Registered: 11/29/04
Disabling Image Dragging to Suport Canvas Drawing  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Sep 22, 2016 2:05 AM
I am trying to implement a feature that allows users to draw on a canvas. I have made it work in VCL applications, but I cannot get it to function in an IW application.

When the mouse is down the code draws on the canvas. When the mouse is up the drawing stops. In the browser this same sequence of actions starts a drag-and-drop procedure. The drawing never happens because the browser thinks the user is trying to drag the image.

How can I stop this? Is there a tag I can add, or java script that can be used?
Alexandre Machado

Posts: 1,754
Registered: 8/10/13
Re: Disabling Image Dragging to Suport Canvas Drawing  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Sep 28, 2016 1:07 AM   in response to: Daniel Fields in response to: Daniel Fields
Daniel Fields wrote:
I am trying to implement a feature that allows users to draw on a canvas. I have made it work in VCL applications, but I cannot get it to function in an IW application.

When the mouse is down the code draws on the canvas. When the mouse is up the drawing stops. In the browser this same sequence of actions starts a drag-and-drop procedure. The drawing never happens because the browser thinks the user is trying to drag the image.

How can I stop this? Is there a tag I can add, or java script that can be used?

Which type of element are you using? You can just add draggable=false to it, like this:

This is an exmple using an IWImage:

procedure TIWForm1.imageHTMLTag(ASender: TObject; ATag: TIWHTMLTag);
begin
  if SameText(ATag.Tag, 'img') then begin
    ATag.AddBoolParam('draggable', False);
  end;
end;


You can also use JavaScript, but if this works, it is easier....
Daniel Fields

Posts: 622
Registered: 11/29/04
Re: Disabling Image Dragging to Suport Canvas Drawing  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Sep 28, 2016 1:18 AM   in response to: Daniel Fields in response to: Daniel Fields
I am using a TIWImage. That code does work to stop the dragging, but it also kills the OnMouseDown/Up events. I need those to enable the drawing.
Alexandre Machado

Posts: 1,754
Registered: 8/10/13
Re: Disabling Image Dragging to Suport Canvas Drawing  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Sep 28, 2016 2:29 AM   in response to: Daniel Fields in response to: Daniel Fields
Daniel Fields wrote:
I am using a TIWImage. That code does work to stop the dragging, but it also kills the OnMouseDown/Up events. I need those to enable the drawing.

Really? Yes, you need those events for sure. I'll have to do some actual testing here...
Alexandre Machado

Posts: 1,754
Registered: 8/10/13
Re: Disabling Image Dragging to Suport Canvas Drawing  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Sep 28, 2016 2:33 AM   in response to: Daniel Fields in response to: Daniel Fields
Daniel Fields wrote:
I am using a TIWImage. That code does work to stop the dragging, but it also kills the OnMouseDown/Up events. I need those to enable the drawing.

I did a quick test here and seems to be working fine... even when draggable is set to false, my TIWImage OnAsyncMouseDown/Up/Move events fire and work normally...
How are you attaching your handlers to the image element?
Daniel Fields

Posts: 622
Registered: 11/29/04
Re: Disabling Image Dragging to Suport Canvas Drawing  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Sep 28, 2016 3:34 AM   in response to: Alexandre Machado in response to: Alexandre Machado
I am just using the events of the image control. I started by porting code that worked in a VCL application. I was stopped dead in my tracks by the dragging issue when I ported it to IW. What do I need to do, sir?
Alexandre Machado

Posts: 1,754
Registered: 8/10/13
Re: Disabling Image Dragging to Suport Canvas Drawing  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Oct 5, 2016 12:21 AM   in response to: Daniel Fields in response to: Daniel Fields
Daniel Fields wrote:
I am just using the events of the image control. I started by porting code that worked in a VCL application. I was stopped dead in my tracks by the dragging issue when I ported it to IW. What do I need to do, sir?

Hum... I don't know exactly what is failing in your case, Daniel. Are you able to isolate this in a simple application, so I can test it here?
Daniel Fields

Posts: 622
Registered: 11/29/04
Re: Disabling Image Dragging to Suport Canvas Drawing  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Oct 5, 2016 1:56 AM   in response to: Alexandre Machado in response to: Alexandre Machado
I must have messed something up in the translation from the VCL. There is not much code to look at.

procedure TIWForm1.Image1AsyncMouseDown(Sender: TObject; EventParams: TStringList);
var x,y : integer;
begin
//IW_SessionID_=h1hGld87g0caMsKsB55k3G IW_TrackID_=2 callback=IMAGE1.DoOnAsyncMouseDown x=151 y=276 which=0 modifiers=
  x := StrToInt(EventParams.Values['x']);
  y := StrToInt(EventParams.Values['y']);
  with image1.Picture.Bitmap.canvas do
  begin
    pen.width:=3;
    pen.color:=clblack;
    drawing:=true;
    moveto(x,y);
  end;
end;
 
procedure TIWForm1.Image1AsyncMouseMove(Sender: TObject; EventParams: TStringList);
var x,y : integer;
begin
  If drawing then with image1 do
  begin
    x := StrToInt(EventParams.Values['x']);
    y := StrToInt(EventParams.Values['y']);
  //cursor:=crNone; {to keep cursor redraw from erasing part of our line}
    Picture.Bitmap.canvas.lineto(x,y);
  //cursor:=crdefault;
  end;
end;
 
procedure TIWForm1.Image1AsyncMouseUp(Sender: TObject; EventParams: TStringList);
begin
  drawing:=false;
end;
 
procedure TIWForm1.Image1HTMLTag(ASender: TObject; ATag: TIWHTMLTag);
begin
  if SameText(ATag.Tag, 'img') then begin
    ATag.AddBoolParam('draggable', False);
  end;
end;
 
procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
  with image1.Picture.Bitmap.canvas do
  begin
    brush.color:=clWhite;
    rectangle(clientrect);
  end;
end;
Legend
Helpful Answer (5 pts)
Correct Answer (10 pts)

Server Response from: ETNAJIVE02