Rank: Advanced Member
Groups: Member
Joined: 4/26/2012(UTC)
Posts: 36
Thanks: 6 times
|
Hi, I have a requirement to overlay one image over another. I've attached an image representing the desired output (please see output.png). The balloons represent one image and the flowers represent a second image. I merged the two images server side using the following (please note I've omitted some code for brevity): Code:
Dim imgFrame As Image = Image.FromFile(Server.MapPath("Balloons.png"))
Dim imgFlowers As Image = Image.FromFile(Server.MapPath("Flowers.jpg"))
Dim imgOutput As Image = New Bitmap(frameWidth, frameHeight)
Dim g As Graphics = Graphics.FromImage(imgOutput)
' Draw specified images at specified locations with specified sizes
g.DrawImage(imgFlowers, New Rectangle(destX, destY, destWidth, destHeight), _
New Rectangle(srcX, srcY, srcWidth, srcHeight), System.Drawing.GraphicsUnit.Pixel)
g.DrawImage(imgFrame, New Rectangle(0, 0, frameWidth, frameHeight))
' Free resources
imgFrame.Dispose()
imgFlowers.Dispose()
g.Dispose()
' Save changes as output file
imgOutput.Save(Server.MapPath(HttpContext.Current.Request.ApplicationPath & _
"output.png"), ImageFormat.Png)
imgOutput.Dispose()
I'm like to extend this to allow the user zoom in, zoom out and pan on the flowers image only, whilst the frame stays static. If anybody has implemented anything similar using Graphics Mill AjaxControls/VectorObjects for the web I'd be grateful for any pointers on how best to achieve it? I could probably implement something where I could capture the zoom event and generate a new image where I overlay the frame on a zoomed in section of the flowers image but I worry that this could be a bit slow/inefficient and may not be making best use of the controls available to me? Thanks NormanL attached the following image(s):
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member
Joined: 5/29/2010(UTC)
Posts: 1,310
Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
|
Hello Norman, Sorry for the long delay. Yes, it is possible to implement your requirem. You will need to make the following: - add two layers with images on the canvas;
- then lock the layer which is located above (in your case it is image with balloons).
Since there is working with vector objects users can zoom in (zoom out) these objects and move them on the canvas as they need. |
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member
Joined: 4/26/2012(UTC)
Posts: 36
Thanks: 6 times
|
Hi Dmitry, Many thanks for the tip - I got it to work as you described, please see below. Code:<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<cc1:CanvasViewer ID="CanvasViewer1" runat="server" Width="700px" Height="700px" ZoomMode="BestFit">
<Canvas ID="Canvas" WorkspaceWidth="700" WorkspaceHeight="700" />
</cc1:CanvasViewer>
</div>
</form>
Code:Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Dim lyrFlowers As New Aurigma.GraphicsMill.AjaxControls.VectorObjects.Layer()
CanvasViewer1.Canvas.Layers().Add(lyrFlowers)
Dim bmpFlowers As New Aurigma.GraphicsMill.Bitmap(Server.MapPath("Tulips.jpg"))
Dim imgFlowers As New Aurigma.GraphicsMill.AjaxControls.VectorObjects.ImageVObject(bmpFlowers, False)
lyrFlowers.VObjects.Add(imgFlowers)
Dim lyrFrame As New Aurigma.GraphicsMill.AjaxControls.VectorObjects.Layer()
CanvasViewer1.Canvas.Layers().Add(lyrFrame)
Dim bmpFrame As New Aurigma.GraphicsMill.Bitmap(Server.MapPath("Balloons.png"))
Dim imgFrame As New Aurigma.GraphicsMill.AjaxControls.VectorObjects.ImageVObject(bmpFrame, False)
Dim rect As Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.RotatedRectangleF = imgFrame.Rectangle
rect.Width = CanvasViewer1.Canvas.WorkspaceWidth
rect.Height = CanvasViewer1.Canvas.WorkspaceHeight
rect.Location = New Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.PointF(0, 0)
imgFrame.Rectangle = rect
imgFrame.Locked = True
lyrFrame.VObjects.Add(imgFrame)
End If
End Sub
Could you explain the relationship between the Canvas WorkspaceWidth/WorkspaceHeight and the CanvasViewer Width/Height? In my example the underlying image (Tulips.jpg) is 1024px x 768px and the frame (Balloons.png) is 700px x 700px, yet the flowers image always seems to get resized (to 700px wide)? Is there anyway that I can have the underlying image not resize yet have the CanvasViewer remain the same size? I've tried various combinations of Canvas WorkspaceWidth/WorkspaceHeight, CanvasViewer Width/Height and CanvasViewer ZoomMode. Thanks for the continued support.
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member
Joined: 5/29/2010(UTC)
Posts: 1,310
Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
|
Hello Norman, I tested your sample. It works perfectly :) I used 700x700 px PNG file (Balloons.png) as a frame and 768x1024 px JPG image (Tulips.jpg). I did not find that the JPG image is resized. It is added to canvas with actual size (768x1024). I attached my sample application based on your code to this post and image which describes canvas scheme. Please download the sample and try it out. If I am wrong, please send me your screenshot which shows what is incorrect. Quote:Could you explain the relationship between the Canvas WorkspaceWidth/WorkspaceHeight and the CanvasViewer Width/Height? CanvasViewer Width/Height is the size of control area which is added to a page. Canvas WorkspaceWidth/WorkspaceHeight is the size of the canvas (the checkerboard area). If an image is more than the canvas size, it will be under the canvas boundaries. Edited by user Monday, May 14, 2012 11:19:27 PM(UTC)
| Reason: Not specified File Attachment(s): Dmitry.Obukhov attached the following image(s): |
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member
Joined: 4/26/2012(UTC)
Posts: 36
Thanks: 6 times
|
Hi Dmitry, Thanks for the reply. Your sample works fine but mine doesn't ;( I wonder is it something to do with file formats? I've attached a couple of screengrabs to illustrate the issue. Tulips1.gif is a screenshot of what the canvas viewer looks like when I use Tulips1.jpg. Tulips2.gif is a screenshot of what the canvas viewer looks like whe I use Tulips2.jpg (the image you kindly provided in your sample). The black squares are for illustration purposes only - they're 700 x 700. Note the difference. The images are exactly the same size - both 1024 x 768 although I note the resolutions are different. The code I'm using is also the same i.e. I simply changed the file name in the following line: Code:Dim bmpFlowers As New Aurigma.GraphicsMill.Bitmap(Server.MapPath("Tulips1.jpg"))
Edited by user Tuesday, May 15, 2012 3:06:13 AM(UTC)
| Reason: Not specified NormanL attached the following image(s):
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member
Joined: 5/29/2010(UTC)
Posts: 1,310
Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
|
Hi Norman, I tested the image ( Win XP Tulips.jpg) and got the same result as you did. You rightly noted that the problem is caused by different resolution. The image should have the same resolution as the frame. In this case it is equal to 72 DPI. I corrected your code and set vertical and horizontal resolution of Tulip.jpg to 72: Code:
Dim bmpFlowers As New Aurigma.GraphicsMill.Bitmap(Server.MapPath("Tulips.jpg"))
Dim bmpFrame As New Aurigma.GraphicsMill.Bitmap(Server.MapPath("Balloons.png"))
bmpFlowers.VerticalResolution = bmpFrame.VerticalResolution
bmpFlowers.HorizontalResolution = bmpFlowers.HorizontalResolution
Dim imgFlowers As New Aurigma.GraphicsMill.AjaxControls.VectorObjects.ImageVObject(bmpFlowers, True)
lyrFlowers.VObjects.Add(imgFlowers)
…
It works okay now (see the screenshot). Sorry that I missed this fact earlier. Please try it and let me know about your result. Edited by user Tuesday, May 15, 2012 7:31:04 PM(UTC)
| Reason: Not specified Dmitry.Obukhov attached the following image(s): |
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member
Joined: 4/26/2012(UTC)
Posts: 36
Thanks: 6 times
|
Hi Dmitry, Apologies for any misunderstanding on my behalf, is the code alone supposed to work? The screengrab you provided is not scaled correctly? I've attached a couple of screengrabs to illustrate the issue. Tulips96dpi.gif uses the code provided and the original 96dpi image, whereas Tulips72dpi.gif uses the code provided and a 72dpi image that I created manually using a photo editor. Note the difference - you'll see if you pan across - you can pan further when using the 72dpi image. Things appear to work correctly if, as you suggest, the images are the same resolution. Is there a way to do this using code alone? Thanks again NormanL attached the following image(s):
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member
Joined: 5/29/2010(UTC)
Posts: 1,310
Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
|
Hi Norman, Sorry, I had a mistake in my code. I set this HorizontalResolution of bmpFlowers: Code:bmpFlowers.HorizontalResolution = bmpFlowers.HorizontalResolution
However it should be so: Code:bmpFlowers.HorizontalResolution = bmpFrame.HorizontalResolution
In other words, the horisontal resolution of Tulips.jpg was not changed. Thus it was resized as you noted. Please correct the code and try again. |
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
|
 1 user thanked Dmitry.Obukhov for this useful post.
|
|
|
|
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.