绘制圆角边缘弧机器人与浮雕效果 [英] draw rounded edge arc in android with embossed effect
本文介绍了绘制圆角边缘弧机器人与浮雕效果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图建立一个自定义组件,即弧形滑盖,我做的弧线和拇指,但无法弄清楚我怎么能画出圆角边缘弧线,并在它的浮雕效果。此刻的滑块看起来像这样
I am trying to develop a custom component i.e. arc slider, I am done with the arc and the thumb but not able to figure out how can I draw the rounded edge arc and also the embossed effect in it. at the moment the slider looks something like this
在code绘制弧
private void drawSlider(Canvas canvas) {
float sweepDegrees = (value * arcWidthInAngle)
/ (maximumValue - minimumValue);
// the grey empty part of the circle
drawArc(canvas, startAngle, arcWidthInAngle, mTrackColor);
// the colored "filled" part of the circle
drawArc(canvas, startAngle, sweepDegrees, mFillColor);
// the thumb to drag.
int radius = ((diameter/2) - (mArcThickness/2));
Point thumbPoint = calculatePointOnArc(centerX, centerY, radius, startAngle + sweepDegrees);
thumbPoint.x = thumbPoint.x - (mThumbDiameter/2);
thumbPoint.y = thumbPoint.y - (mThumbDiameter/2);
Bitmap thumbBitmap = BitmapFactory.decodeResource(
mContext.getResources(), R.drawable.circle25);
thumbBitmap = getResizedBitmap(thumbBitmap, mThumbDiameter, mThumbDiameter);
canvas.drawBitmap(thumbBitmap, thumbPoint.x, thumbPoint.y,
null);
}
private void drawArc(Canvas canvas, float startAngle, float sweepDegrees,
Paint paint) {
if (sweepDegrees <= 0 || sweepDegrees > arcWidthInAngle) {
return;
}
path.reset();
path.arcTo(outerCircle, startAngle, sweepDegrees);
path.arcTo(innerCircle, startAngle + sweepDegrees, -sweepDegrees);
// innerCircle.
path.close();
canvas.drawPath(path, paint);
}
我的目标为圆弧像这样
I am aiming for the arc something like this
推荐答案
我设法建立电弧一些什么样的下方
I managed to build the arc some what like below
我所做的是我计算的弧线起止点,有我画的圆圈直径等于圆弧的厚度。
What I did is I calculated the arc starting and ending point and there I draw the circle with diameter equal to arc thickness.
在code因为这是
private void drawSlider(Canvas canvas) {
float sweepDegrees = (value * arcWidthInAngle)
/ (maximumValue - minimumValue);
// the grey empty part of the arc
drawArc(canvas, startAngle, arcWidthInAngle, mTrackColor);
// the colored "filled" part of the arc
drawArc(canvas, startAngle, sweepDegrees, mFillColor);
// the thumb to drag.
int radius = ((diameter/2) - (mArcThickness/2));
Point thumbPoint = calculatePointOnArc(centerX, centerY, radius, startAngle + sweepDegrees);
thumbPoint.x = thumbPoint.x - (mThumbDiameter/2);
thumbPoint.y = thumbPoint.y - (mThumbDiameter/2);
Bitmap thumbBitmap = BitmapFactory.decodeResource(
mContext.getResources(), R.drawable.circle25);
thumbBitmap = getResizedBitmap(thumbBitmap, mThumbDiameter, mThumbDiameter);
canvas.drawBitmap(thumbBitmap, thumbPoint.x, thumbPoint.y,
null);
//drawArc(canvas, startAngle, startAngle + sweepDegrees, white);
}
private void drawArc(Canvas canvas, float startAngle, float sweepDegrees,
Paint paint) {
if (sweepDegrees <= 0 || sweepDegrees > arcWidthInAngle) {
return;
}
path.reset();
int radius = ((diameter/2) - (mArcThickness/2));
Point startPoint = calculatePointOnArc(centerX, centerY, radius, startAngle);
Point endPoint = calculatePointOnArc(centerX, centerY, radius, startAngle + sweepDegrees);
path.arcTo(outerCircle, startAngle, sweepDegrees);
path.arcTo(innerCircle, startAngle + sweepDegrees, -sweepDegrees);
// drawing the circle at both the end point of the arc to git it rounded look.
path.addCircle(startPoint.x, startPoint.y, mArcThickness/2, Path.Direction.CW);
path.addCircle(endPoint.x, endPoint.y, mArcThickness/2, Path.Direction.CW);
path.close();
canvas.drawPath(path, paint);
}
// this is to calculate the end points of the arc
private Point calculatePointOnArc(int circleCeX, int circleCeY, int circleRadius, float endAngle)
{
Point point = new Point();
double endAngleRadian = endAngle * (Math.PI / 180);
int pointX = (int) Math.round((circleCeX + circleRadius * Math.cos(endAngleRadian)));
int pointY = (int) Math.round((circleCeY + circleRadius * Math.sin(endAngleRadian)));
point.x = pointX;
point.y = pointY;
return point;
}
// for the emboss effect set maskfilter of the paint to EmbossMaskFilter
private Paint mTrackColor = new Paint();
MaskFilter mEmboss = new EmbossMaskFilter(new float[] { 0.0f, -1.0f, 0.5f},
0.8f, 15, 1.0f);
mTrackColor.setMaskFilter(mEmboss);
这篇关于绘制圆角边缘弧机器人与浮雕效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文