Using Canvas.drawBitmapMesh(), I am able to change an image to simulate a perspective change, but the way the image is altered is unexpected.
Original Image > Transformed Image
>>>>> One By One Transform>>>> 
canvas.drawBitmapMesh(myBitmap, 1, 1, fourPoints, 0, null, 0, null);
The int[] fourPoints matches the dimensions of myBitmap except the top left point is moved to the right and the top right point is moved to the left.
POINT: 768.0, 0.0
POINT: 2304.0, 0.0
POINT: 0.0, 2304.0
POINT: 3072.0, 2304.0
Notice that the above right image has an unexpected diagonal 'fold'. This, as opposed to the image I generated below (not using Android Canvas drawBitmapMesh).
Expected Transformation:
I'll call the above expected result the 'smooth lines' transformation.
Increasing Mesh
I tried increasing the defined mesh for the transformation to a two-by-two size. It masks problem, but the problem with the 'folds' still exists.
Two-by-two mesh
canvas.drawBitmapMesh(myBitmap, 2, 2, ninePoints, 0, null, 0, null);
The int[] ninePoints matches the dimensions of myBitmap on the bottom, but the rest are adjusted to create a trapezoid.
POINT: 768.0, 0.0
POINT: 1536.0, 0.0
POINT: 2304.0, 0.0
POINT: 384.0, 1152.0
POINT: 1536.0, 1152.0
POINT: 2688.0, 1152.0
POINT: 0.0, 2304.0
POINT: 1536.0, 2304.0
POINT: 3072.0, 2304.0
From a coding perspective, it would be no problem to keep increasing the size of the mesh until it approximates the 'smooth lines' result, but it seems like that would waste CPU processing. Maybe there's a trick to get this function to do what I expect as opposed to having the diagonal 'fold' lines? So I'm wondering if there was a way to have a one-by-one mesh and get the 'smooth lines' which might be more efficient.
from Using Android Canvas.drawBitmapMesh gives unexpected bitmap transformation


No comments:
Post a Comment