Hi, I am new to EWB, please forgive the naive question...
I want to draw an elastic rectangle "on top" of an image, move it around, retrieve the size/location. I put a TPaint on top of a TImage with transparent set to true, but it blocks the TImage underneath. Even made a button to set the TPaint transparent to true at runtime.

Or am I trying to use the wrong component? Is there a list of components somewhere? Someone referred to a TCanvasImage, but I don't see one. (1.03 build 7).

Thanks,
Alister.

Almanac wrote:

Part 1: I was able to create an image of a rectangle with a transparent center and load that into a Timage.

How do I get the X,Y position of the Timage component at runtime? Is there a CursorPos property like there was in Delphi? Is there an easy way to drag the image at runtime?

Part answers...I found the list of components in the Help (blush).

I still don't know how get the TCanvasPaint onto the form when it is not in the component bar at upper right.

Thanks,
Alister.

On 07/07/14 01:09, Almanac wrote:
> I want to draw an elastic rectangle "on top" of an image, move it around, retrieve the size/location. I put a TPaint on top of a TImage with transparent set to true, but it blocks the TImage underneath. Even made a button to set the TPaint transparent to true at runtime.
>
> Or am I trying to use the wrong component? Is there a list of components somewhere? Someone referred to a TCanvasImage, but I don't see one. (1.03 build 7).
>
I created a very basic application using just TImage and TPaint controls
and it seemed to work as requested.

The steps I took follow but first some runtime observations:

1. In the IDE the offset for the drawn triangle seems to be incorrect
relative to the mouse position.

2. In IE 10 the rectangle positioning is correct but the drawing is slow.

3. In Firefox the rectangle positioning is correct and the drawing is
fast. Best experience here.

The approach I took is as follows (hope it's helpful):

1. Create a new visual project and set the HTML5 support option.

2. Drop a TImage and a TPaint control on the form. They don't have to
overlap.

3. Load an image into Image1. I also set the Stretched property to TRUE
in the object inspector.

4. Create the following properties in the Form1 Private section:
Drawing: boolean;
oX,oY: integer;

5. Create the following events:
Form1Create
Paint1MouseDown
Paint1MouseMove
Paint1MouseUp

6. Add the required code to the events so that the resultant unit looks
as follows:

unit Unit1;

interface

uses WebCore, WebForms, WebCtrls;

type

   TForm1 = class(TForm)
      Image1: TImage;
      Paint1: TPaint;
      procedure Paint1MouseDown(Sender: TObject; Button: Integer;
ShiftKey, CtrlKey, AltKey: Boolean; X,Y: Integer);
      procedure Form1Create(Sender: TObject);
      procedure Paint1MouseMove(Sender: TObject; ShiftKey, CtrlKey,
AltKey: Boolean; X,Y: Integer);
      procedure Paint1MouseUp(Sender: TObject; Button: Integer;
ShiftKey, CtrlKey, AltKey: Boolean; X,Y: Integer);
   private
      { Private declarations }
      Drawing: boolean;
      oX,oY: integer;
   public
      { Public declarations }
   end;

var
   Form1: TForm1;

implementation

procedure TForm1.Form1Create(Sender: TObject);
begin
Drawing:=False;
oX:=0;
oY:=0;
Paint1.Left:=Image1.Left;
Paint1.Top:=Image1.Top;
Paint1.Width:=Image1.Width;
Paint1.Height:=Image1.Height;
Paint1.Transparent:=True;
Paint1.Canvas.StrokeColor:=clWhite;   // Rect color
Paint1.BringToFront;
end;

procedure TForm1.Paint1MouseDown(Sender: TObject; Button: Integer;
ShiftKey, CtrlKey, AltKey: Boolean; X,Y: Integer);
begin
Drawing:=True;
oX:=X;
oY:=Y;
Paint1.Canvas.ClearRect(0,0,Paint1.Width,Paint1.Height);
end;

procedure TForm1.Paint1MouseMove(Sender: TObject; ShiftKey, CtrlKey,
AltKey: Boolean; X,Y: Integer);
begin
if not Drawing then exit;
Paint1.Canvas.ClearRect(0,0,Paint1.Width,Paint1.Height);
Paint1.Canvas.StrokeRect(oX,oY,X-oX,Y-oY);
end;

procedure TForm1.Paint1MouseUp(Sender: TObject; Button: Integer;
ShiftKey, CtrlKey, AltKey: Boolean; X,Y: Integer);
begin
Drawing:=False;
end;

end.



--
Rick

On 07/07/14 15:17, Rick wrote:
> On 07/07/14 01:09, Almanac wrote:
>> I want to draw an elastic rectangle "on top" of an image, move it
>> around, retrieve the size/location. I put a TPaint on top of a TImage
>> with transparent set to true, but it blocks the TImage underneath.
>> Even made a button to set the TPaint transparent to true at runtime.
>>
>> Or am I trying to use the wrong component? Is there a list of
>> components somewhere? Someone referred to a TCanvasImage, but I don't
>> see one. (1.03 build 7).
>>
> I created a very basic application using just TImage and TPaint controls
> and it seemed to work as requested.
>
>
Also worth adding a Paint1MouseLeave event which has the following
definition:

procedure TForm1.Paint1MouseLeave(Sender: TObject);
begin
Drawing:=False;
end;

This will ensure that drawing is stopped if the mouse leaves the image.

I suspect that at some point the requirement will be to extract the part
of the image encompassed by the rectangle. Probably using the
Canvas.DrawImage component in another TPaint control might be useful for
this.


--
Rick

Almanac wrote:

> Or am I trying to use the wrong component? Is there a list of
> components somewhere? Someone referred to a TCanvasImage, but I don't
> see one. (1.03 build 7).

The main thing is to understand that this is not really an EWB
component, but a browser supplied drawing canvas. Thus the answers are
all out there on the internet. I just Google the name of the functions
and there are plenty of examples. How do you use the quadraticCurveTo
function? I have no idea, but this page has examples:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

The "drawing shapes with canvas" tutorial there says that ClearRect
should make it fully transparent.

--

Matthew Jones

Wow, thanks guys! I've run out of time tonight but I'll give it a whirl tomorrow.

Much appreciated,
Alister.

Awesome, works like a charm! Your code snippet and pointer to the link for HTML5 Canvas is 90% of what I needed. The rest is SMOP and a bit of time & focus.

I will post my finished result, hopefully before month's end. The hunch about extracting the image in the window is partially correct - I'm actually loading several key frames from a long time lapse, positioning the movable rectangle on each, then exporting a smoothed set of the coordinates to a file, to be read by a script that launches say ImageMagick with the crop coords in a loop, to spit out frames for a new time lapse that pans and zooms within the original frames - essentially tracking a moving object and zooming in on it.

I feel happy! You and the community are wonderful!
Cheers, Alister.

Just to put a proper end this thread... your recommendations have been included in my web app. I've zipped up the project and posted it in the demos section for all to use:
http://www.elevatesoft.com/forums?action=view&category=ewb&id=ewb_demos&page=1&msg=162#162

There were a fair number of subtleties with component properties needing to be off at design and turned on at runtime to work as expected. Here is a link to a 15 sec video showing the key result: http://vimeo.com/102544213

I really appreciate everyone's help and pointers over the past few months!
Alister.

Almanac wrote:

> Here is a link to a 15 sec video

Looks interesting, though I don't understand a bit of it. 8-)

--

Matthew Jones