Outlining, Dragging, and Pasting a Region (JavaScript)
Take the following steps to add code that lets you outline an area with a mouse, drag a copy of the selected area, and paste the copy into another part of the bitmap:
1. |
Start with the project that you created in Loading and Displaying an Image. |
2. |
Add the following code between the <BODY> </BODY> tags to add another LEAD Raster View control named LEADRasterView2: |
<OBJECT ID="LEADRasterView2" NAME="LEADRasterView2"
CLASSID="CLSID:00140708-B1BA-11CE-ABC6-F5B2E79D9E3F"
CODEBASE="path to CAB file/ Ltrvw14n.CAB"
ALIGN="baseline"
BORDER="0"
WIDTH="50%"
HEIGHT="90%">
<P>This is not supported in the web browser.</P>
</OBJECT><BR>
3. |
Add the following code between the <BODY> </BODY> tags to add a LEAD Raster Process object named RasterProc: |
<OBJECT ID="RasterProc" NAME="RasterProc"
CLASSID="CLSID:00140712-B1BA-11CE-ABC6-F5B2E79D9E3F"
CODEBASE="path to CAB file/Ltrpr14n.cab">
<P>This is not supported in the web browser.</P>
</OBJECT><BR>
4. |
Add the following variables between the <SCRIPT> </SCRIPT> tags. In online help, you can use the Edit pull-down menu to copy the block of code: |
var ReadyToDrag; //The state after marking the region but before dragging
var Dragging; //The state when the mouse is used for dragging the floater
var StartX; //Starting X position in screen twips
var StartY; //Starting Y position in screen twips
var FloaterX; //Floater X position in screen twips
var FloaterY; //Floater Y position in screen twips
var ZoomFactorX; //Used for translating positioning information
var ZoomFactorY; //Used for translating positioning information
5. |
Add the following code between the <FORM> </FORM> tags to create two buttons: "btnSelRgn" and "btnPasteRgn": |
<INPUT TYPE="button" NAME="btnSelRgn" VALUE="Select Region" LANGUAGE="JavaScript"
OnClick="SelectRgn()">
<INPUT TYPE="button" NAME="btnPasteRgn" VALUE="Paste Region" LANGUAGE="JavaScript"
OnClick="PasteRgn()">
6. |
Add the following code between the <SCRIPT> </SCRIPT> tags for the btnSelRgn button: |
function SelectRgn()
{
var RGNFRAME_ANIMATED = 2;
var RGNMARK_FREEHAND = 4;
LEADRasterView1.RgnFrameType = RGNFRAME_ANIMATED;
LEADRasterView1.RasterUnk.RefBitmap = false;
LEADRasterView1.RgnMarkingMode = RGNMARK_FREEHAND;
alert("Draw a freehand region");
}
7. |
Add the following code between the <SCRIPT> </SCRIPT> tags for the btnPasteRgn button: |
function PasteRgn()
{
var LCRgnX;
var LCRgnY;
var LCRgnWidth;
var LCRgnHeight;
var LBRgnX;
var LBRgnY;
var LBRgnWidth;
var LBRgnHeight;
var MyOp;
var CB_OP_ADD;
var CB_DST_0;
CB_OP_ADD = 768;
CB_DST_0 = 32;
//Do nothing if there is no floater.
if (LEADRasterView1.Floater == 0)
{
return;
}
//Get the floater into another bitmap
LEADRasterView2.RasterUnk.RefBitmap = false;
LEADRasterView2.ScaleMode = LEADRasterView1.ScaleMode;
LEADRasterView2.RasterUnk.Bitmap = LEADRasterView1.Floater;
//Get the floater's client coordinates into local variables.
LCRgnX = LEADRasterView1.FloaterDstLeft;
LCRgnY = LEADRasterView1.FloaterDstTop;
LCRgnWidth = LEADRasterView1.FloaterDstWidth;
LCRgnHeight = LEADRasterView1.FloaterDstHeight;
//Delete the floater.
LEADRasterView1.FloaterVisible = false;
LEADRasterView1.Floater = 0;
//Translate the client coordinates to bitmap coordinates.
LBRgnX = ((LCRgnX - LEADRasterView1.DstLeft) / ZoomFactorX) + LEADRasterView1.SrcLeft;
LBRgnY = ((LCRgnY - LEADRasterView1.DstTop) / ZoomFactorY) + LEADRasterView1.SrcTop;
LBRgnWidth = LCRgnWidth / ZoomFactorX;
LBRgnHeight = LCRgnHeight / ZoomFactorY;
//Reposition the region to use as a mask for the Combine method.
LEADRasterView1.RasterUnk.OffsetRgn(LBRgnX - LEADRasterView1.RasterUnk.RgnLeft, LBRgnY - LEADRasterView1.RasterUnk.RgnTop);
//Use the Combine method to paste the LEADRasterView2 bitmap into the LEADRasterView1 bitmap.
MyOp = CB_OP_ADD + CB_DST_0; //Operation flags for a simple paste.
RasterProc.Combine(LEADRasterView1.RasterUnk, LBRgnX, LBRgnY, LBRgnWidth, LBRgnHeight, LEADRasterView2.RasterUnk, 0, 0, MyOp);
//Repaint the part of the client area that has changed.
LEADRasterView1.RepaintRect(LCRgnX, LCRgnY, LCRgnWidth, LCRgnHeight, false);
//Free the region.
LEADRasterView1.RasterUnk.FreeRgn();
}
8. |
Insert the following code between the <HEAD> </HEAD> tags to handle the MouseDown, MouseMove and MouseUp events respectively: |
<SCRIPT LANGUAGE="JavaScript" FOR="LEADRasterView1" EVENT="MouseDown(Button, Shift , x , y)">
<!--
var BitmapX;
var BitmapY;
var NewX;
var NewY;
var NewWidth;
var NewHeight;
var RGNMARK_NONE = 0;
var RGNFRAME_NONE = 0;
//Do nothing if we are drawing a region.
if (LEADRasterView1.RgnMarkingMode != RGNMARK_NONE)
{
return;
}
//Save the starting position, in case we need it.
StartY = y;
StartX = x;
//If we are ready to drag the selection, get a floater.
if (ReadyToDrag = true)
{
//Translate the current mouse coordinates.
//These coordinates account for the zoom factor and offset.
ZoomFactorX = LEADRasterView1.DstWidth / LEADRasterView1.SrcWidth;
ZoomFactorY = LEADRasterView1.DstHeight / LEADRasterView1.SrcHeight;
BitmapX = (x / ZoomFactorX) - (LEADRasterView1.DstLeft / ZoomFactorX) + LEADRasterView1.SrcLeft;
BitmapY = (y / ZoomFactorY) - (LEADRasterView1.DstTop / ZoomFactorY) + LEADRasterView1.SrcTop;
//Continue to create the floater if the mouse is pointing to the region we marked.
if (LEADRasterView1.RasterUnk.IsPtInRgn(BitmapX, BitmapY))
{
//Hide the region frame.
LEADRasterView1.RgnFrameType = RGNFRAME_NONE;
//Create the floater bitmap, which will be the part of the main bitmap that is
//in the region's bounding rectangle.
LEADRasterView1.Floater = LEADRasterView1.RasterUnk.Bitmap;
//Translate the bitmap region coordinates to client area coordinates.
NewY = ((LEADRasterView1.RasterUnk.RgnTop - LEADRasterView1.SrcTop) * ZoomFactorY) + LEADRasterView1.DstTop;
NewX = ((LEADRasterView1.RasterUnk.RgnLeft - LEADRasterView1.SrcLeft) * ZoomFactorX) + LEADRasterView1.DstLeft;
NewWidth = LEADRasterView1.RasterUnk.RgnWidth* ZoomFactorX;
NewHeight = LEADRasterView1.RasterUnk.RgnHeight * ZoomFactorY;
//Set the initial display position of the floater.
LEADRasterView1.SetFloaterDstRect(NewX, NewY, NewWidth, NewHeight);
//Set form-level variables.
FloaterY = LEADRasterView1.FloaterDstTop;
FloaterX = LEADRasterView1.FloaterDstLeft;
LEADRasterView1.FloaterVisible = true;
Dragging = true;
ReadyToDrag = false;
}
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" FOR="LEADRasterView1" EVENT="MouseMove(Button, Shift, x, y)">
<!--
var xDelta;
var yDelta;
var NewX;
var NewY;
var NewWidth;
var NewHeight;
var RGNMARK_NONE;
RGNMARK_NONE = 0;
//Do nothing if we are drawing a region.
if (LEADRasterView1.RgnMarkingMode != RGNMARK_NONE)
{
return;
}
//Reposition the floater if we are dragging it.
if (Dragging == true && Button == 1 && LEADRasterView1.Floater != 0)
{
if (LEADRasterView1.IsPtInFloater(x, y))
{
//Update the position variables.
xDelta = x - StartX;
yDelta = y - StartY;
NewX = FloaterX + xDelta;
NewY = FloaterY + yDelta;
NewWidth = LEADRasterView1.RasterUnk.RgnWidth;
NewHeight = LEADRasterView1.RasterUnk.RgnHeight;
//Reposition the floater.
LEADRasterView1.SetFloaterDstRect(NewX, NewY, NewWidth, NewHeight);
//Save the form-level position variables.
FloaterY = NewY;
FloaterX = NewX;
StartY = y;
StartX = x;
}
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" FOR="LEADRasterView1" EVENT="MouseUp(Button, Shift, x, y)">
<!--
var RGNMARK_NONE = 0;
var RGNFRAME_ANIMATED = 2;
//If we were drawing a region, set up for the next operation.
if (LEADRasterView1.RgnMarkingMode != RGNMARK_NONE)
{
LEADRasterView1.RgnMarkingMode = RGNMARK_NONE;
LEADRasterView1.RgnFrameType = RGNFRAME_ANIMATED;
ReadyToDrag = true;
alert("Now, drag the selection to another place.");
}
//-->
</SCRIPT>
9. |
Run your page to test it. |