GlyphMatrixObject.Builder()'s transformation functions behaving unhelpfully. #4

Activity

1. PixHammer commented on Jul 22, 2025

   

   PixHammer

   on Jul 22, 2025

   Last edited by PixHammer

   Author

   More actions

   Until this is fixed, others can calculate this extra offset with the following in order to maintain your position with arbitrary rotations, but it's only needed at non 100% scales.

       private fun rotationCorrectionOffset(widthInPixels: Double, angle: Int): Double{
           // need radians
           val angleRad = Math.toRadians(angle.toDouble());
           val cosAngle = abs(cos(angleRad));
           val sinAngle = abs(sin(angleRad));
           
           // size after extra rotation - since our images are always 1:1 we only need to do this once
           val newWidth = (widthInPixels * cosAngle + widthInPixels * sinAngle);
           
           // get just the extra
           val extraWidth = newWidth - widthInPixels;
   
           // The offset is half of the extra space (to center the image)
           val offset = extraWidth / 2.0;
   
           return offset;
       }
   

   Round down to int after you subtract this from any other double position representations you have.

   ❤️React with ❤️2Reacted by SebiAi and KenFeng04
2. PixHammer commented on Jul 26, 2025

   

   PixHammer

   on Jul 26, 2025

   Last edited by PixHammer

   Author

   More actions

   pretty big correction! My previous code has an issue, it appears when the rotated object's canvas exceeds 25x25 pixels, it is clamped to that size! This means that my code will not work on any rotated canvas that exceeds 25x25, here is a corrected version that will account for this:

       // gets the position offset that must be applied to a rotated GlyphMatrixObject in order to maintain a consistent on screen position
       // scaleFactor here is a double representation of the image scale, with 100% scale being 1.0
       private fun rotationCorrectionOffset(angle: Int, scaleFactor: Double): Double {
           // canvas size before rotation
           var oldPixelSize: Double = MATRIX_SIZE * scaleFactor;
           if (oldPixelSize > MATRIX_SIZE) {
               oldPixelSize = MATRIX_SIZE.toDouble()
           }
   
           // need to work in radians
           val angleRad: Double = Math.toRadians(angle.toDouble())
           var cosAngle: Double = abs(cos(angleRad))
           var sinAngle: Double = abs(sin(angleRad))
   
           // figure out the new pixel size after rotation
           var newScale: Double = (cosAngle + sinAngle)
           var newPixelSize: Double = MATRIX_SIZE * newScale * scaleFactor;
           if (newPixelSize > MATRIX_SIZE) {
               newPixelSize = MATRIX_SIZE.toDouble()
           }
   
           // offset is half of the difference in canvas size after rotation
           return (newPixelSize - oldPixelSize) * 0.5
       }
   

   A little frustrating to have to figure this out through trial and error! All in all, it looks like the internal canvas size of GlyphMatrixObject's can never exceed 25x25!

   You can use this as follows:

       // Function to create a glyph matrix object of a drawable, transformed and centered
       private fun renderDrawableCentred(
           drawable: Drawable,
           xPos: Int,
           yPos: Int,
           rotation: Int,
           scaleFactor: Double,
       ): GlyphMatrixObject {
           // get the bitmap from the drawable
           val bitmap = GlyphMatrixUtils.drawableToBitmap(drawable)
   
           // offset needed to centre the image
           val pixelExtent = (MATRIX_SIZE * scaleFactor * 0.5).toInt()
   
           // Calculate the offset needed to compensate for rotation bounds expansion
           var rotationOffset = rotationCorrectionOffset(rotation, scaleFactor).roundToInt()
   
           val outXPosition = xPos - pixelExtent - rotationOffset
           val outYPosition = yPos - pixelExtent - rotationOffset
   
           // create image object
           return GlyphMatrixObject.Builder()
               .setImageSource(bitmap)
               .setScale((100.0 * scaleFactor).roundToInt())
               .setPosition(outXPosition, outYPosition)
               .setOrientation(rotation)
               .build()
       }
   

   MATRIX_SIZE = 25