i want my bitmap in the center of my screen..i m trying it that way but its not working...
Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.compass);
int w = canvas.getWidth();
int h = canvas.getHeight();
int bw=myBitmap.getWidth();
int bh=myBitmap.getHeight();
int cx = w / 2;
int cy = h / 2;
Display d = getWindowManager().getDefaultDisplay();
int x = d.getWidth();
int y = d.getHeight();
int dx = x / 2;
int dw = y /2;
canvas.translate(cx, cy);
if (mValues != null) {
canvas.rotate(-mValues[0]);
}
int centreX = (x - bw) /2;
int centreY = (cy - bh) /2;
//canvas.drawPath(mPath, mPaint);
canvas.drawBitmap(myBitmap, centreX,centreY, null);
Here's the code you need in your view:
private int mWidth;
private int mHeight;
private float mAngle;
#Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
mWidth = View.MeasureSpec.getSize(widthMeasureSpec);
mHeight = View.MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(mWidth, mHeight);
}
#Override protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.compass);
// Here's the magic. Whatever way you do it, the logic is:
// space available - bitmap size and divide the result by two.
// There must be an equal amount of pixels on both sides of the image.
// Therefore whatever space is left after displaying the image, half goes to
// left/up and half to right/down. The available space you get by subtracting the
// image's width/height from the screen dimensions. Good luck.
int cx = (mWidth - myBitmap.getWidth()) >> 1; // same as (...) / 2
int cy = (mHeight - myBitmap.getHeight()) >> 1;
if (mAngle > 0) {
canvas.rotate(mAngle, mWidth >> 1, mHeight >> 1);
}
canvas.drawBitmap(myBitmap, cx, cy, null);
}
Screenshot just for fun: http://imgur.com/EYpMJ
(Diagonal lines not part of the code posted here)
EDIT: Added NickT's solution.
EDIT 2: Changed mvalues[0] to mAngle and made it conditional. Changed divide by 2 operations to bitshifts. Remove rotation code if you don't need it.
You can try this :
int width = containerBitmap.getWidth();
int height = containerBitmap.getHeight();
float centerX = (width - centeredBitmap.getWidth()) * 0.5f;
float centerY = (height- centeredBitmap.getHeight()) * 0.5f;
You can use it to draw a bitmap at the center of another bitmap.
Related
Can someone explain me how I can set that canvas doesnt draw circle outside the screen?
In screenshot it looks like this -
Click here to see image
As you can see, some of the circles is half outside the screen but I want that all of the circle is inside the screen.
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Random random = new Random();
int minRadius = 50;
int w = this.getWidth();
int h = this.getHeight();
Paint paint = new Paint();
for (int i=0; i<resultInt; i++) {
int red = (int) (Math.random() * 255);
int green = (int) (Math.random() * 255);
int blue = (int) (Math.random() * 255);
int randX = random.nextInt(w);
int randY = random.nextInt(h);
int color = Color.rgb(red, green, blue);
paint.setColor(color);
canvas.drawCircle(randX, randY, minRadius, paint);
}
}
}
}
You have to subtract your double radius:
int w = this.getWidth() - 2 * minRadius;
int h = this.getHeight() - 2 * minRadius;
And then fix random point:
int randX = random.nextInt(w) + minRadius;
int randY = random.nextInt(h) + minRadius;
int w = this.getWidth() - minRadius * 2;
int h = this.getHeight() - minRadius * 2;
...
int randX = random.nextInt(w) + minRadius;
int randY = random.nextInt(h) + minRadius;
I am trying to draw a circle progress bar around an circle image. I have tried to create my own "CircleImageView" Class which extends "ImageView"
my onDraw() method
protected void onDraw(Canvas canvas) {
canvas.drawCircle(mCenter[0], mCenter[1], mRadius, ringPaint);
progress = 30; //for testing
float angle = 360 * progress / maxProgress;
canvas.drawArc(mOval, mStartAngle, angle, false, progressPaint);
super.onDraw(canvas);
}
onMeasure method()
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
final int height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
final int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
final int min = Math.min(width, height);
setMeasuredDimension(width, height);
// Get image matrix values and place them in an array
float[] f = new float[9];
getImageMatrix().getValues(f);
// Extract the scale values using the constants (if aspect ratio maintained, scaleX == scaleY)
final float scaleX = f[Matrix.MSCALE_X];
final float scaleY = f[Matrix.MSCALE_Y];
// Get the drawable (could also get the bitmap behind the drawable and getWidth/getHeight)
final Drawable d = getDrawable();
final int origW = d.getIntrinsicWidth();
final int origH = d.getIntrinsicHeight();
// Calculate the actual dimensions
final int actW = Math.round(origW * scaleX);
final int actH = Math.round(origH * scaleY);
Log.e("DBG", "[" + origW + "," + origH + "] -> [" + actW + "," + actH + "] & scales: x=" + scaleX + " y=" +
scaleY);
mCenter = new int[]{width / 2, height / 2};
mRadius = (int) mCenter[0] - actW - progressStrokeWidth / 2;
mOval.set(mCenter[0] - mRadius, mCenter[1] - mRadius, mCenter[0] + mRadius, mCenter[1] + mRadius); //mOval is an instance of RectF
}
init() method
private void init(Context context, AttributeSet attrs) {
mContext = context;
TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.CircleProgressAttr);
progressStrokeWidth = typedArray.getInteger(R.styleable.CircleProgressAttr_progressRingSize, 20);
mRingColor = typedArray.getInt(R.styleable.CircleProgressAttr_progressRingColor, R.color.ringColor);
mProgressColor = typedArray.getInt(R.styleable.CircleProgressAttr_progressColor, R.color.tab_underline_color);
mStartAngle = -90;
maxProgress = 100;
mOval = new RectF();
ringPaint = new Paint();
progressPaint = new Paint();
ringPaint.setColor(mRingColor);
ringPaint.setStyle(Paint.Style.STROKE);
ringPaint.setStrokeWidth(progressStrokeWidth);
ringPaint.setAntiAlias(true);
progressPaint.setColor(mProgressColor);
progressPaint.setStyle(Paint.Style.STROKE);
progressPaint.setStrokeWidth(progressStrokeWidth);
progressPaint.setAntiAlias(true);
}
I have inserted the CircleView into a RelativeLayout with the following XML-code
<com.kevinwang.simpleplayer.CircleImageView
android:id="#+id/cd_img"
android:src="#drawable/cd01"
android:layout_above="#id/play_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"/>
I ran the app, but the progressbar didn't show, is there anything wrong with my code ?
I need to crop image like this
I need to draw partial image from center
I know there is draw() method of batch with a lot of params, but there is no good documentation about all this params, so i can't figure out how to use it.
Here is what i implemented:
public class TexturePart {
Texture tex;
Vector2 position;
// Target Dimension of image
int targetWidth;
int targetHeight;
// Src Dimensions of Image
int srcWidth;
int srcHeight;
int srcX;
int srcY;
// Ratio of dimension of target and source
float srcTargetRatioX;
float srcTargetRatioY;
// ImagePart variables with values between 0-100 to draw part of image
int startPercentX;
int endPercentX;
int startPercentY;
int endPercentY;
int clipWidth;
int clipHeight;
int clipSrcWidth;
int clipSrcHeight;
public TexturePart(TextureRegion reg, float x, float y) {
tex = reg.getTexture();
position = new Vector2(x, y);
srcX = reg.getRegionX();
srcY = reg.getRegionY();
srcWidth = reg.getRegionWidth();
srcHeight = reg.getRegionHeight();
clipSrcWidth = srcWidth;
clipSrcHeight = srcHeight;
startPercentX = 28;
startPercentY = 28;
endPercentX = 72;
endPercentY = 72;
SetTargetDimension(srcWidth, srcHeight);
}
public void setSrcWidthHeight(int width, int height){
this.srcWidth=width;
this.srcHeight=height;
}
public void setSrcHeight(int height){
this.srcHeight=height;
}
public void SetTargetDimension(int targetWidth, int targetHeight) {
this.targetWidth = targetWidth;
this.targetHeight = targetHeight;
clipWidth = targetWidth;
clipHeight = targetHeight;
srcTargetRatioX = (float) targetWidth / (float) srcWidth;
srcTargetRatioY = (float) targetHeight / (float) srcHeight;
}
public void SetStart(int x, int y) {
startPercentX = x;
startPercentY = y;
}
public void SetEnd(int x, int y) {
endPercentX = x;
endPercentY = y;
}
public void Draw(SpriteBatch sp) {
clipSrcWidth = (int) (Math.abs(startPercentX - endPercentX) / 100f * srcWidth);
clipSrcHeight = (int) (Math.abs(startPercentX - endPercentY) / 100f * srcHeight);
int startX = clipWidth/2 + (int) ((float) startPercentX / 100f * (float) srcX);
int startY = clipHeight/2 + (int) ((float) startPercentY / 100f * (float) srcY);
clipWidth = (int) (srcTargetRatioX * clipSrcWidth);
clipHeight = (int) (srcTargetRatioY * clipSrcHeight);
sp.begin();
float scaleX=targetWidth/(srcWidth+0.f);
float scaleY=targetHeight/(srcHeight+0.f);
sp.draw(tex, 0, 0, srcWidth, srcHeight, srcWidth, srcHeight, 1, 1, 0, startX, startY, clipSrcWidth, clipSrcHeight, false, false);
//sp.draw(tex, 0,0,clipWidth, clipHeight, clipWidth, clipHeight, clipSrcWidth, clipSrcHeight, false, false);
sp.end();
}
But its not working as expected
To crop the texture you just need to use TextureRegion
TextureRegion(Texture texture, int x, int y, int width, int height)
in your case it should look like:
Texture texture; //this is your original image
...
TextureRegion region = new TextureRegion(texture, texture.getWidth()*0.28f, 0, texture.getWidth()*0.44f, texture.getHeight() );
...
//now you can just draw your texture region
sp.draw(region); //you can also use other versions of draw to set region position on screen and so on
Why i set x as texture.getWidth()*0.28f? Because if want it centered it should have left margin = 50% of original texture width - texture region width.
(1 - 0.44) / 2 = 0.28
I'm trying to make a frame for TextView as a cloud. But the content area does not behave as expected. What am i doing wrong?
I have a suggestion that is not working properly because the content area less scale area. So sad. I remade it to handle 9-patch manually. Save pictures without .9.png. Get Bitmap. There are 9-line present. With getPixels calculated padding and set it on the TextView. After that calculating and set LayoutParams.width and LayoutParams.height. Looks a bit ugly, but it works quite quickly, and most importantly correctly.
private int startX=-1;
private int endX=-1;
private int contentW=-1;
private int contentH=-1;
Bitmap bmp=BitmapFactory.decodeResource(getResources(), mIconResId);
int[] pixels=new int[bmp.getWidth()*bmp.getHeight()];
bmp.getPixels(pixels, 0, bmp.getWidth(), 0, 0, bmp.getWidth(),bmp.getHeight());
for(int i=0;i<bmp.getWidth();i++){
if(startX==-1 && pixels[bmp.getWidth()*(bmp.getHeight()-1)+i]==Color.BLACK){
startX=i;
}
if(startX!=-1 && pixels[bmp.getWidth()*(bmp.getHeight()-1)+i]!=Color.BLACK){
endX=i;
break;
}
}
int startY=-1;
int endY=-1;
for(int i=0;i<bmp.getHeight();i++){
if(startY==-1 && pixels[bmp.getWidth()*(i+1)-1]==Color.BLACK){
startY=i;
}
if(startY!=-1 && pixels[bmp.getWidth()*(i+1)-1]!=Color.BLACK){
endY=i;
break;
}
}
setBackground(new BitmapDrawable(getResources(),Bitmap.createBitmap(bmp, 1, 1, bmp.getWidth()-2, bmp.getHeight()-2)));
contentW=endX-startX;
endX=bmp.getWidth()-endX;
contentH=endY-startY;
endY=bmp.getHeight()-endY;
new Handler().post(new Rannable(){
#Override
public void run() {
int w=textview.getWidth();
int h=textview.getHeight();
if(w>endX-startX){
float k=((float)w)/contentW;
startX=(int) (startX*k);
endX=(int) (endX*k);
}
if(h>endY-startY){
float k=((float)h)/contentH;
startY=(int) (startY*k);
endY=(int) (endY*k);
}
w+=startX+startX;
h+=startY+endY;
textview.setPadding(startX, startY, endX, endY);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(w,h);
textview.setLayoutParams(lp);
}
});
You set good values for right and bottom borders. You just have to set same values for left and top borders, left border = right border and top border = bottom border.
The result in draw9patch:
And here the 9-patch file:
For your information, your image is not really suitable for using with 9-patch format.
I extended/adapted #ahtartam code. I am not sure if it is the cleanest way but it works for me. If someone needs help, just contact me or ask in comments!
public void setTextLayout(int orgW, int orgH,int actW,int actH,int top,int left) {
int startX = -1;
int endX = -1;
int startY = -1;
int endY = -1;
int contentW;
int contentH;
Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.image);
int[] pixels = new int[orgW * orgH];
bmp.getPixels(pixels, 0, orgW, 0, 0, orgW, orgH);
for (int i = 0; i < orgW; i++) {
if (startX == -1 && pixels[orgW * (orgH - 1) + i] == Color.BLACK) {
startX = i;
}
if (startX != -1 && pixels[orgW * (orgH - 1) + i] != Color.BLACK) {
endX = i;
break;
}
}
for (int i = 0; i < orgH; i++) {
if (startY == -1 && pixels[orgW * (i + 1) - 1] == Color.BLACK) {
startY = i;
}
if (startY != -1 && pixels[orgW * (i + 1) - 1] != Color.BLACK) {
endY = i;
break;
}
}
m_marvin.setImageDrawable(new BitmapDrawable(getResources(), Bitmap.createBitmap(bmp, 1, 1, orgW - 2, orgH - 2)));
RelativeLayout.LayoutParams rp = (RelativeLayout.LayoutParams) m_marvin.getLayoutParams();
contentW=endX- startX;
contentH=endY-startY;
endX=orgW-endX;
endY=orgH-endY;
double scaleX = ((double)actW) / bmp.getWidth();
double scaleY = ((double)actH) / bmp.getHeight();
startX = (int) (startX * scaleX);
endX = (int) (endX * scaleX);
startY = (int) (startY * scaleY);
endY = (int) (endY * scaleY) ;
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams((int)(contentW*scaleX),(int)(contentH*scaleY));
layoutParams.setMargins(startX+rp.leftMargin+left, startY+rp.topMargin+top, endX+rp.rightMargin, endY+rp.bottomMargin);
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL,RelativeLayout.TRUE);
m_text.setLayoutParams(layoutParams);
m_text.bringToFront();
}
Instead TextView I use SizeAwareImageView from -> https://stackoverflow.com/a/15538856/1438596
In my case it looks like this->
public class SizeAwareImageView extends ImageView {
MainActivity m_mainActivity;
public SizeAwareImageView(Context context,AttributeSet attrss){
super(context,attrss);
m_mainActivity = (MainActivity)context;
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if(m_mainActivity.getTextMeasured())return;
// Get image matrix values and place them in an array
float[] f = new float[9];
getImageMatrix().getValues(f);
// Extract the scale values using the constants (if aspect ratio maintained, scaleX == scaleY)
final float scaleX = f[Matrix.MSCALE_X];
final float scaleY = f[Matrix.MSCALE_Y];
// Get the drawable (could also get the bitmap behind the drawable and getWidth/getHeight)
final Drawable d = getDrawable();
final int origW = d.getIntrinsicWidth();
final int origH = d.getIntrinsicHeight();
// Calculate the actual dimensions
final int actW = Math.round(origW * scaleX);
final int actH = Math.round(origH * scaleY);
int top = (int) (imgViewH - actH)/2;
int left = (int) (imgViewW - actW)/2;
if(origW!=actW){
m_mainActivity.setTextMeasured(true);
m_mainActivity.setTextLayout(origW, origH, actW, actH,top,left);
}
}
}
You could use this tool for creating your nine-patch images.
I have customview for displaying two bitmaps but the problem is it is scaling to center crop but I don't want to crop bitmap instead I want to display full bitmap in canvas.
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
mLayoutWidth = MeasureSpec.getSize(widthMeasureSpec);
mLayoutHeight = MeasureSpec.getSize(heightMeasureSpec);
this.setMeasuredDimension(mLayoutWidth, mLayoutHeight);
mBitmap = scaleCenterCrop(mBitmap, mLayoutWidth, mLayoutHeight);
overlayDefault = FastBlur.doBlur(mBitmap, 20, false);
overlayDefault = scaleCenterCrop(overlayDefault, mLayoutWidth,
mLayoutHeight);
overlay = mBitmap.copy(Config.ARGB_8888, true);
overlay = scaleCenterCrop(overlay, mLayoutWidth, mLayoutHeight);
cx = (mLayoutWidth - mBitmap.getWidth()) >> 1;
cy = (mLayoutHeight - mBitmap.getHeight()) >> 1;
c2 = new Canvas(overlay);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
final Rect bitmapRect = ImageViewUtil.getBitmapRectCenterInside(
mBitmap.getWidth(), mBitmap.getHeight(), mLayoutWidth, mLayoutHeight);
setBitmapRect(bitmapRect);
invalidate();
}
public Bitmap scaleCenterCrop(Bitmap original, int deviceHeight,
int deviceWidth) {
int old_width = original.getWidth();
int old_height = original.getHeight();
float scale = Math.max((float) deviceHeight / old_height,
(float) deviceWidth / old_width);
float newWidth = scale * old_width;
float newHeight = scale * old_height;
float left = (deviceWidth - newWidth) / 2;
float top = (deviceHeight - newHeight) / 2;
RectF rectF = new RectF(left, top, left + newWidth, top + newHeight);
Bitmap scaled = Bitmap.createBitmap(deviceWidth, deviceHeight,
original.getConfig());
Canvas canvas = new Canvas(scaled);
canvas.drawBitmap(original, null, rectF, null);
return scaled;
}