DrawImage in a circle

[cecilcheah]

I would like to load an image file (gif, jpg) into memory and then only draw part of the image inside a round circle. Can this be done with little API programming?

[netmaestro]

May I ask what the circle is? Is it to be a transparent sprite, an image with a transparent background, a place on the screen or what? It affects the method used, but in any case you shouldn't need the api. Let me know a bit more and I'll show you what to do.

[cecilcheah]

It is transparent to show an image inside.

Actually this is what i am trying to do. I want to move the mouse over an image, and the circle will act like a magnifying glass to magnify part of the image over the mouse. The circle will be directly under the mosue pointer.

Can this be done with little API programming?

[netmaestro]

Ok, that looks pretty easy actually just using PB drawing commands. I'll post you an example back here soon.

[netmaestro]

Ok, done. Try this test program out. It should do what you're after.

Code: Select all

LoadFont(0,"Arial",18,#PB_Font_Bold)
CreateImage(0,500,500)
StartDrawing(ImageOutput())
  Box(0,0,500,500,RGB(255,255,255))
  DrawingFont(UseFont(0))
  For i = 0 To 475 Step 25
    Locate(0,i)
    DrawText("The rain in Spain falls mainly on the plain.")
  Next i
StopDrawing()
CopyImage(0,1)
ResizeImage(1,300,300)
OpenWindow(0,0,0,400,400,#PB_Window_SystemMenu|#PB_Window_ScreenCentered,"Magnifying Glass example by Network Maestro")
InitSprite():InitMouse():InitKeyboard()
OpenWindowedScreen(WindowID(0),50,50,300,300,0,0,0)
CreateSprite(0,94,94)
TransparentSpriteColor(0,70,20,80)
Repeat
  ExamineMouse()
  GrabImage(0,2,MouseX()*1.67,MouseY()*1.67,94,94)
  StartDrawing(SpriteOutput(0))
    DrawImage(UseImage(2),0,0)
    FrontColor(70,20,80)
    DrawingMode(4)
    Circle(46,46,45)
    DrawingMode(1)
    FillArea(2,2,RGB(70,20,80),RGB(70,20,80))
  StopDrawing()
  StartDrawing(ScreenOutput())
    DrawImage(UseImage(1),0,0)
  StopDrawing()
  DisplayTransparentSprite(0,MouseX(),MouseY())
  FlipBuffers()
  Delay(1)
  ExamineKeyboard()
Until KeyboardPushed(#PB_Key_All) Or MouseButton(#PB_MouseButton_Left) Or MouseButton(#PB_MouseButton_Right)

[cecilcheah]

Excellent Stuff, except one problem:

When i move the mouse to the edge of the text boundary, say the top, click left mouse, click right mouse, move back to the middle, click left mousr
-> GPF.

How come?

Cecil

[netmaestro]

"Doctor, doctor, my arm hurts when I do this!"

"Don't do that."

Kidding aside, the example isn't meant to be a bulletproof functioning app, just a code snippet to demonstrate the technique. Mouse clicks are not used or anticipated. You can take it from here with my best wishes for success. btw, it sounds like you're making a cool app, I hope you'll demo it for us when it's done!

** EDIT ** I've edited the example code so that any keypress or mouse click will end the program. GPF's ain't cool, even in snippets.

[cecilcheah]

Of course, you are right. A couple of questions here.

How can i make the top left position of the window Screen to be the same as the main Window? At the moment, the 0,0 position of the window screen seems to be shift down and right to the main Window.

Here is my code:

Code: Select all

UseJPEGImageDecoder()
InitSprite():InitMouse():InitKeyboard() 

OpenWindow(0,0,0,600,600,#PB_Window_SystemMenu|#PB_Window_ScreenCentered,"Magnifying Glass example by Network Maestro") 
OpenWindowedScreen(WindowID(0),0,0,106,75,0,0,0) 
LoadImage(0,"image1.jpg") 

CopyImage(0,1) 
ResizeImage(1,106,75) 


CreateSprite(0,94,94) 
TransparentSpriteColor(0,70,20,80) 
Repeat 
  ExamineMouse() 
  GrabImage(0,2,MouseX()*4,MouseY()*4,94,94) 
  StartDrawing(SpriteOutput(0)) 
    DrawImage(UseImage(2),0,0) 
    FrontColor(70,20,80) 
    DrawingMode(4) 
    Circle(46,46,20) 
    DrawingMode(1) 
    FillArea(2,2,RGB(70,20,80),RGB(70,20,80)) 
  StopDrawing() 
  StartDrawing(ScreenOutput()) 
    DrawImage(UseImage(1),0,0) 
  StopDrawing() 
  DisplayTransparentSprite(0,MouseX(),MouseY()) 
  FlipBuffers() 
  Delay(1) 
  ExamineKeyboard() 
Until KeyboardPushed(#PB_Key_All) Or MouseButton(#PB_MouseButton_Left) Or MouseButton(#PB_MouseButton_Right) 

Cecil

[netmaestro]

In my code example I used programming to create the image so the code could be run "as is" with no dependencies, whereas you are calling an image from disk. Without your image I can't run your code.

[cecilcheah]

Here is the image:
[img]
http://www.webcbt.ch/images/image1.jpg

[/img]

Cecil

[netmaestro]

The reason the magnifier won't go to the corners is that you resized the circle in the magnifier sprite but left the sprite and the image that gets drawn on it at the bigger size. The result is a wide margin of transparent pixels around the circle. Your sprite and image should be 4 pixels larger than your circle in both dimensions to work properly, but no more. Off the top of my head I'd say that 4x is too much magnification to look right, but you can play with that and find something that looks good. If I were doing it, I'd probably add some gray space to the original image as well as the smaller one and make the windowed screen fit the small image + grayspace, that way your magnifier can go past the edge and it will look right. Anyway, you're off and running now. Good luck!

[zefiro_flashparty]

486dx 66mhz + 8MB ram, trident 9680 pci 1MB, Monitor Monochrome 14" 640x480@60 , Win 95