I would like to draw the right part of an image, but the result is alwas a stretched image of the entire bitmap, or a stretched part of the center of the bitmap. What am I doing wrong here?
int width;
int percentToDraw;
Random rand = new Random();
percentToDraw = rand.nextInt(100);
width = bmp.getWidth() * (100 - percentToDraw) / 100;
src = new Rect();
src.top = 0;
src.bottom = bmp.getHeight();
src.right = bmp.getWidth();
src.left = src.right - width;
dst = new Rect;
dst.top = getHeight() / 2 - bmp.getHeight() / 2;
dst.bottom = dst.top + (src.bottom - src.height);
dst.right = getWidth() / 2 + bmp.getWidth() / 2;
dst.left = dst.right - width;
canvas.drawBitmap(bmp, src, dst, paint);
I have been fiddling and googling about this for two days now, widthout finding anything close to a solution :-(
In case anyone else stumbles over this, I have been unable to make it work "correctly" but I've found a working solution using clipRect:
int width;
width = (int) Math.floor(bmp.getWidth() * percentToDraw / 100.0);
src = new Rect();
src.top = 0;
src.bottom = bmp.getHeight();
src.left = 0;
src.right = bmp.getWidth();
dst = new Rect();
dst.top = getHeight() / 2 - bmp.getHeight() / 2;
dst.bottom = dst.top + (src.bottom - src.top);
dst.left = getWidth() / 2 - bmp.getWidth() / 2;
dst.right = dst.left + (src.right - src.left);
canvas.clipRect(dst.right - width, 0, getWidth(), getHeight(), Region.Op.REPLACE);
canvas.drawBitmap(bmp, src, dst, paint);
canvas.clipRect(0, 0, getWidth(), getHeight(), Region.Op.REPLACE);
Related
I'm trying to animate a background in a game I'm making.
https://imgur.com/kQGWsLu
Should look like this(terrible recording quality)
My first attempt work well on my phone but a lot of people saw their fps cut in half:
public void draw(Canvas canvas, Paint paint) {
if (mPaint == null) {
mPaint = new Paint();
mPaint.setColor(Color.GRAY);
mPaint.setStrokeWidth(1);
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mPaint.setShader(new RadialGradient(canvas.getWidth() / 4, canvas.getHeight() / 3,
Math.max(1, canvas.getHeight() / 2), Color.rgb(5, 12, 127), Color.rgb(32, 36, 100), Shader.TileMode.REPEAT));
}
width = canvas.getWidth();
height = canvas.getHeight();
canvas.save();
rotation += 4;
if (rotation > 360)
rotation = 0;
canvas.rotate(rotation, width / 2, height / 2);
canvas.drawCircle(width / 2, height / 2, height * 1.3f, mPaint);
canvas.restore();
}
So now I'm thinking about of pre rendering a image and drawing it as a bitmap that covers the screen and rotates instead. I also cut the calculations to only update every other frame instead.
public void draw(Canvas canvas, Paint paint) {
if (!initiated) {
centerX = (int) (canvas.getWidth() / 2);
centerY = (int) (canvas.getHeight() / 2);
width = (int) (canvas.getWidth() * 2f);
height = (int) (canvas.getHeight() * 2f);
map = factory.GFX().getBackground();
initiated = true;
}
if (!skipUpdate) {
x = CalculatorService.getXCircle(rotation, distance, centerX);
y = CalculatorService.getYCircle(rotation, distance, centerY);
body.set((int) x - width / 2,
(int) y - height / 2,
(int) x + (width / 2),
(int) y + (height / 2));
rotation += rotationSpeed;
if (rotation > 360)
rotation = 0;
}
skipUpdate = !skipUpdate;
canvas.drawBitmap(map, null, body, paint);
}
Though since the image is small in size 320*320 I had to scale it up and draw it bigger then the screen to avoid it moving out of bounds and showing the basic black background, and I'm not sure if this is really a improvement, do anyone have a better way of doing it or any advice on how I can improve?
This is how my custom drawable looks by default.
But when scrolled, it overlaps with the AppBarLayout.
The code for the Drawable goes like this:
#Override
public void draw(#NonNull Canvas canvas) {
// get drawable dimensions
Rect bounds = getBounds();
float width = bounds.right - bounds.left;
float height = bounds.bottom - bounds.top;
float w2 = width / 2;
float h2 = height / 2;
float radius = Math.min(w2, h2) - mStrokeWidth / 2;
mPath.reset();
mPath.addCircle(width / 2, height / 2, radius, Path.Direction.CW);
canvas.clipPath(mPath);
// draw background gradient
float barHeight = height / themeColors.length;
mRectF.left = 0;
mRectF.top = 0;
mRectF.right = width;
mRectF.bottom = height;
for (int i = 0; i < themeColors.length; i++) {
mPaint.setColor(themeColors[i]);
canvas.drawRect(0, i * barHeight, width, (i + 1) * barHeight, mPaint);
}
mRectF.set(0, 0, width, height);
canvas.clipRect(mRectF, Region.Op.REPLACE);
if (mStrokeWidth != 0)
canvas.drawCircle(width / 2, height / 2, width / 2 - mStrokeWidth / 2, mStrokePaint);
}
Support Library Version: 25.3.1, 26.1.0
What I've tried:
- Different Region values for clipping path instead of REPLACE
- Clipping path rectangle first and then clipping circle.
How do I fix this ?
I am posting my solution as answer.
The reason it was getting overlapped was because the canvas was getting clipped twice without saving it.
I removed this statement:
canvas.clipRect(mRectF, Region.Op.REPLACE);
and before clipping the canvas for the first time
i saved its state using
canvas.save();
canvas.clipPath(mPath);
and then when i was drawing the stroke, i need the original canvas so i restored it
canvas.restore();
if (mStrokeWidth != 0)
canvas.drawCircle(width / 2, height / 2, width / 2 - mStrokeWidth / 2, mStrokePaint);
This fixed the issue.
Final Drawable Code:
#Override
public void draw(#NonNull Canvas canvas) {
// get drawable dimensions
Rect bounds = getBounds();
float width = bounds.right - bounds.left;
float height = bounds.bottom - bounds.top;
float w2 = width / 2;
float h2 = height / 2;
float radius = Math.min(w2, h2) - mStrokeWidth / 2;
mPath.reset();
mPath.addCircle(width / 2, height / 2, radius, Path.Direction.CW);
canvas.save();
canvas.clipPath(mPath);
// draw background gradient
float barHeight = height / themeColors.length;
mRectF.left = 0;
mRectF.top = 0;
mRectF.right = width;
mRectF.bottom = height;
for (int i = 0; i < themeColors.length; i++) {
mPaint.setColor(themeColors[i]);
canvas.drawRect(0, i * barHeight, width, (i + 1) * barHeight, mPaint);
}
mRectF.set(0, 0, width, height);
//canvas.clipRect(mRectF, Region.Op.REPLACE);
canvas.restore();
if (mStrokeWidth != 0)
canvas.drawCircle(width / 2, height / 2, width / 2 - mStrokeWidth / 2, mStrokePaint);
}
with opencv i want crop top image portion and written this code.
// crop image
Integer halfWidth = width / 2;
Integer HalfHeight = height / 2;
Integer startX = halfWidth - (halfWidth / 2);
Mat mRgba = new Mat(HalfHeight, halfWidth, CvType.CV_8UC1);
Rect roi = new Rect(0, HalfHeight, width, height);
At result i got this result and my program shutdown.
Mat [ 360*480*CV_8UC1, isCont=true, isSubmat=false, nativeObj=0x5c54da18, dataAddr=0x60aa8010 ]
1549064728
{0, 360, 960x720}
My old object higher than first. How i can fix them?
From the code you provide, I can guess that your ROI should be:
Rect roi = new Rect(0, HalfHeight, width, height-HalfHeight);
My full code
protected void calculate(int width, int height, byte[] data)
{
Mat mYuv = new Mat(height + height / 2, width, CvType.CV_8UC1);
Mat thresholdImage = new Mat(height + height / 2, width, CvType.CV_8UC1);
mYuv.put(0, 0, data);
// crop image
Integer halfWidth = width / 2;
Integer HalfHeight = height / 2;
Integer startX = halfWidth - (halfWidth / 2);
Mat mRgba = new Mat(HalfHeight, halfWidth, CvType.CV_8UC1);
Rect roi = new Rect(0, HalfHeight, width, height-HalfHeight);
mRgba = new Mat(mRgba, roi);
Imgproc.cvtColor(mYuv, mRgba, Imgproc.COLOR_YUV420p2BGR, 4);
//convert to grayscale
Imgproc.cvtColor(mRgba, thresholdImage, Imgproc.COLOR_mRGBA2RGBA, 4);
// Perform a Gaussian blur (convolving in 5x5 Gaussian) & detect edges
//Imgproc.GaussianBlur(mRgba, mRgba, new Size(5,5), 2.2, 2);
Imgproc.Canny(mRgba, thresholdImage, VActivity.CANNY_MIN_TRESHOLD, VActivity.CANNY_MAX_THRESHOLD);
Mat lines = new Mat();
double rho = 0.15;
double theta = Math.PI/180;
int threshold = 50;
//do Hough transform to find lanes
Imgproc.HoughLinesP(thresholdImage, lines, rho, theta, threshold, VActivity.HOUGH_MIN_LINE_LENGTH, VActivity.HOUGH_MAX_LINE_GAP);
for (int x = 0; x < lines.cols() && x < 5; x++)
{
double[] vec = lines.get(0, x);
double x1 = vec[0],
y1 = vec[1],
x2 = vec[2],
y2 = vec[3];
Point start = new Point(x1, y1);
Point end = new Point(x2, y2);
Core.line(mRgba, start, end, new Scalar(255, 0, 0), 3);
}
if (bitmap == null)
bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Utils.matToBitmap(mRgba, bitmap);
drawThread.setBitmap(bitmap);
}
And got same error. Maybe in this i need send another params or just clone to mRgba
Mat mRgba = new Mat(HalfHeight, halfWidth, CvType.CV_8UC1);
Rect roi = new Rect(0, HalfHeight, width, height-HalfHeight);
mRgba = new Mat(mRgba, roi);
create background resources with 800*480.if another photo's width <= height.whatever this photo's pixel wes bigger or larger! alway make this photo fit on background resources ,photo must be on move within background resources !how can i got that?Thanks
private Bitmap scale(Bitmap origin) {
Bitmap bitmap = Bitmap.createBitmap(BitmapFactory.decodeResource(
getResources(), R.drawable.example_bg), 0, 0, 800, 480);
Canvas canvas = new Canvas(bitmap);
Rect target = null;
int orgWidth = origin.getWidth();
int orgHeight = origin.getHeight();
int bgHeight = bitmap.getHeight();
int bgWidth = bitmap.getWidth();
if (orgWidth * bgHeight > orgHeight * bgWidth) {
int newWidth = bgWidth, newHeight = newWidth * orgHeight / orgWidth;
target = new Rect(0, (bgHeight - newHeight) / 2, newWidth,
(bgHeight + newHeight) / 2);
} else {
int newHeight = bgHeight, newWidth = newHeight * orgWidth
/ orgHeight;
target = new Rect((bgWidth - newWidth) / 2, 0,
(bgWidth + newWidth) / 2, newHeight);
}
canvas.drawBitmap(origin, null, target, new Paint(Paint.DITHER_FLAG
| Paint.FILTER_BITMAP_FLAG));
return bitmap;
}
just using this code you may get your answer...
canvas.drawBitmap(Bitmap.createScaledBitmap(origin, 480, 800, true), 0,0, new Paint(Paint.DITHER_FLAG
| Paint.FILTER_BITMAP_FLAG));
I've been trying this for some time, I would like to create a wallpaper from a Bitmap. Let's say the desired wallpaper size is 320x480, and the source image size is 2048x2048.
I'm not sure whether crop-to-fit is the right term, but what I would like to achieve is to get most part of the picture that has the equal ratio as the desired wallpaper size (320x480).
So in this case, I would like to get 2048x1365 or (1365.333... to be exact) from the source Bitmap, and scale it down to 320x480.
The technique that I have tried is:
1) Crop the Bitmap into 2048x1365 first
bm = Bitmap.createBitmap(bm, xOffset, yOffset, 2048, 1365);
2) Scale it down to 320x480
bm = Bitmap.createScaledBitmap(bm, 320, 480, false);
which produced OutOfMemory error.
Is there any way to achieve this?
Regards,
dezull
Thanks to open source, I found the answer from Android Gallery source code here at line 230 :-D
croppedImage = Bitmap.createBitmap(mOutputX, mOutputY, Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(croppedImage);
Rect srcRect = mCrop.getCropRect();
Rect dstRect = new Rect(0, 0, mOutputX, mOutputY);
int dx = (srcRect.width() - dstRect.width()) / 2;
int dy = (srcRect.height() - dstRect.height()) / 2;
// If the srcRect is too big, use the center part of it.
srcRect.inset(Math.max(0, dx), Math.max(0, dy));
// If the dstRect is too big, use the center part of it.
dstRect.inset(Math.max(0, -dx), Math.max(0, -dy));
// Draw the cropped bitmap in the center
canvas.drawBitmap(mBitmap, srcRect, dstRect, null);
I know this is an incredibly late reply, but something like this maybe:
public static Bitmap scaleCropToFit(Bitmap original, int targetWidth, int targetHeight){
//Need to scale the image, keeping the aspect ration first
int width = original.getWidth();
int height = original.getHeight();
float widthScale = (float) targetWidth / (float) width;
float heightScale = (float) targetHeight / (float) height;
float scaledWidth;
float scaledHeight;
int startY = 0;
int startX = 0;
if (widthScale > heightScale) {
scaledWidth = targetWidth;
scaledHeight = height * widthScale;
//crop height by...
startY = (int) ((scaledHeight - targetHeight) / 2);
} else {
scaledHeight = targetHeight;
scaledWidth = width * heightScale;
//crop width by..
startX = (int) ((scaledWidth - targetWidth) / 2);
}
Bitmap scaledBitmap = Bitmap.createScaledBitmap(original, (int) scaledWidth, (int) scaledHeight, true);
Bitmap resizedBitmap = Bitmap.createBitmap(scaledBitmap, startX, startY, targetWidth, targetHeight);
return resizedBitmap;
}
here is an answer that gets you most of the way there:
How to crop an image in android?