• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
  • Mikalai Zaikin

ImageButton, drawable and drawing shapes on drawable

Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

I have an bitmap, that when normal size, I draw lines/circles/rectangles on top of. These shapes and locations are dynamic on top of the bitmap. I render all this on an ImageView with no problem.

However I now need to render (and scale probably 1/4 the size of the original) the bitmap on an ImageButton and on that drawable do those shapes in a different Activity. The problem is the drawable is not placed in the complete upper left corner of the button but is (and this is correct) centered left to right. The height of the bitmap is from top to bottom of the button.

The problem is the coordinates used to draw the shapes on the drawable on the button no long align due to this centering of the drawable.

Any strategies that can alleviate the issue of the dynamic shapes and their coordinates? The imageview is used on a completely different Activity and is not available during this process of scaling/etc.

Posts: 4179
IntelliJ IDE Python Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Here are two suggestions:

1) Using a single off-screen Bitmap as a buffer to hold the drawing. Scale the off-screen buffer as needed for each activity
--- a - Create an empty Bitmap you will use as a drawing space (an off-screen copy of the drawing): drawingSpaceBitmap
--- b - Create a Canvas using the Bitmap to draw on (new Canvas(drawingSpaceBitmap))
--- c - Draw the background bitmap onto the canvas
--- d - On activity 1, draw drawingSpaceBitmap onto your ImageView
--- e - When user draws something, draw it using the Canvas, then trigger the ImageView to repaint. The image view should get the changes to the canvas via the drawingSpaceBitmap
--- f - On activity 2, add the drawingSpaceBitmap to your ImageButton and scale appropriately (maybe make a scaled copy if the image is static while this activity is visible to reduce the work needed to paint it). The button should get the results of the drawing on the canvas

2) Scale the drawings as you re-make them
--- a - Get the ratio of source image height to button height: scaleHeight
--- b - Get the ratio of source image width to button width: scaleWidth
--- c - Get the scaled image's width: scaledImageWidth
--- d - Get the button's width: buttonWidth
--- e - Get the X offset for drawing: (buttonWidth / 2) - (scaledImageWidth / 2) (+/- 1 pixel probably)
--- f - Get the Y offset for drawing: 0 (you said the image is drawing on the button's top to bottom.)
--- g - Draw objects with new positions.
--- --- - Positions are X:(offsetX + ( originalX * scaleWidth ) ) Y:( offsetY + ( originalY * scaleHeight ) )
--- --- - Sizes are Width:( originalWidth * scaleWidth ) Height:( originalHeight * scaleHeight )
--- --- - Horizontal lines are ( PositionXstart , PositionYstart ) -> ( ( PositionXstart + ( length * scaleWidth ) ) , PositionYstart )
--- --- - Vertical lines are ( PositionXstart , PositionYstart ) -> ( PositionXstart , ( PositionYstart + ( length * scaleHeight ) ) )
--- --- - Diagonal lines will require some extra math, but really just a combination of the X part of the Horizontal and Y part of the Vertical:
( PositionXstart , PositionYstart ) -> ( ( PositionXstart + ( originalDeltaX * scaleWidth ) ) , ( PositionYstart + ( originalDeltaY * scaleHeight ) ) )
Which should work if you know the original starting point and ending point. If you only know the lines starting point, angle, and length you will need to calculate the deltas.

All that math is why I lead with using an offscreen bitmap to draw and scale the results...
Jim Harrison
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello Steve,

Thanks. That solved my problem.

Don't get me started about those stupid light bulbs.
    Bookmark Topic Watch Topic
  • New Topic