我会为你的前两个问题使用面具。
1.创建一个平滑的渐变
第一步是绘制两个具有线性渐变的矩形。第一个矩形包含蓝色和绿色，而第二个矩形包含绿色和红色，如下图所示。我将两个矩形相互接触的线标记为黑色，以澄清它们实际上是两个不同的矩形。
这可以使用以下代码（摘录）来实现：
// Both color gradients
private Shader shader1 = new LinearGradient(0, 400, 0, 500, Color.rgb(59, 242, 174), Color.rgb(101, 172, 242), Shader.TileMode.CLAMP);
private Shader shader2 = new LinearGradient(0, 400, 0, 500, Color.rgb(59, 242, 174), Color.rgb(255, 31, 101), Shader.TileMode.CLAMP);
private Paint paint = new Paint();
// ...
@Override
protected void onDraw(Canvas canvas) {
float width = 800;
float height = 800;
float radius = width / 3;
// Arc Image
Bitmap.Config conf = Bitmap.Config.ARGB_8888; // See other config types
Bitmap mImage = Bitmap.createBitmap(800, 800, conf); // This creates a mutable bitmap
Canvas imageCanvas = new Canvas(mImage);
// Draw both rectangles
paint.setShader(shader1);
imageCanvas.drawRect(0, 0, 400, 800, paint);
paint.setShader(shader2);
imageCanvas.drawRect(400, 0, 800, 800, paint);
// /Arc Image
// Draw the rectangle image
canvas.save();
canvas.drawBitmap(mImage, 0, 0, null);
canvas.restore();
}
由于您的目标是有一个带圆角的彩色弧线，我们接下来需要定义用户应该可以看到的两个矩形的区域。这意味着两个矩形中的大部分都将被屏蔽掉，因此不可见。相反，唯一剩下的就是弧形区域。
结果应如下所示：
为了实现所需的行为，我们定义了一个仅显示矩形内圆弧区域的蒙版。为此，我们大量使用 的setXfermode方法Paint。作为参数，我们使用 a 的不同实例PorterDuffXfermode。
private Paint maskPaint;
private Paint imagePaint;
// ...
// To be called within all constructors
private void init() {
// I encourage you to research what this does in detail for a better understanding
maskPaint = new Paint();
maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
imagePaint = new Paint();
imagePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER));
}
@Override
protected void onDraw(Canvas canvas) {
// @step1
// Mask
Bitmap mMask = Bitmap.createBitmap(800, 800, conf);
Canvas maskCanvas = new Canvas(mMask);
paint.setColor(Color.WHITE);
paint.setShader(null);
paint.setStrokeWidth(70);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setAntiAlias(true);
final RectF oval = new RectF();
center_x = 400;
center_y = 400;
oval.set(center_x - radius,
center_y - radius,
center_x + radius,
center_y + radius);
maskCanvas.drawArc(oval, 135, 270, false, paint);
// /Mask
canvas.save();
// This is new compared to step 1
canvas.drawBitmap(mMask, 0, 0, maskPaint);
canvas.drawBitmap(mImage, 0, 0, imagePaint); // Notice the imagePaint instead of null
canvas.restore();
}
2.创建覆盖白色拇指
这解决了你的第一个问题。第二个可以再次使用掩码来实现，尽管这次我们想要实现一些不同的东西。之前，我们只想显示背景图像（两个矩形）的特定区域（弧线）。这一次我们想做相反的事情：我们定义一个背景图像（拇指）并掩盖它的内部内容，这样似乎只剩下笔划。应用于弧形图像的拇指用透明内容区域覆盖彩色弧形。
所以第一步是画拇指。我们为此使用与背景弧具有相同半径但角度不同的弧，从而产生更小的弧。但是因为拇指应该“包围”背景弧线，所以它的笔划宽度必须大于背景弧线。
@Override
protected void onDraw(Canvas canvas) {
// @step1
// @step2
// Thumb Image
mImage = Bitmap.createBitmap(800, 800, conf);
imageCanvas = new Canvas(mImage);
paint.setColor(Color.WHITE);
paint.setStrokeWidth(120);
final RectF oval2 = new RectF();
center_x = 400;
center_y = 400;
oval2.set(center_x - radius,
center_y - radius,
center_x + radius,
center_y + radius);
imageCanvas.drawArc(oval2, 270, 45, false, paint);
// /Thumb Image
canvas.save();
canvas.drawBitmap(RotateBitmap(mImage, 90f), 0, 0, null);
canvas.restore();
}
public static Bitmap RotateBitmap(Bitmap source, float angle)
{
Matrix matrix = new Matrix();
matrix.postRotate(angle);
return Bitmap.createBitmap(source, 0, 0, source.getWidth(), source.getHeight(), matrix, true);
}
代码的结果如下所示。
所以现在我们有一个覆盖背景弧的拇指，我们需要定义移除拇指内部的遮罩，以便背景弧再次可见。
为了实现这一点，我们基本上使用与之前相同的参数来创建另一个弧，但是这次笔划宽度必须与用于背景弧的宽度相同，因为这标志着我们要在拇指内移除的区域。
使用以下代码，生成的图像如图 4 所示。
@Override
protected void onDraw(Canvas canvas) {
// @step1
// @step2
// Thumb Image
// ...
// /Thumb Image
// Thumb Mask
mMask = Bitmap.createBitmap(800, 800, conf);
maskCanvas = new Canvas(mMask);
paint.setColor(Color.WHITE);
paint.setStrokeWidth(70);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
final RectF oval3 = new RectF();
center_x = 400;
center_y = 400;
oval3.set(center_x - radius,
center_y - radius,
center_x + radius,
center_y + radius);
maskCanvas.drawBitmap(mImage, 0, 0, null);
maskCanvas.drawArc(oval3, 270, 45, false, paint);
// /Thumb Mask
canvas.save();
canvas.drawBitmap(RotateBitmap(mMask, 90f), 0, 0, null); // Notice mImage changed to mMask
canvas.restore();
}
3. 为白色拇指设置动画
你问题的最后一部分是动画弧的运动。我对此没有可靠的解决方案，但也许可以指导您朝着有用的方向发展。我会尝试以下方法：
首先将拇指定义为ImageView整个弧形图的一部分。更改图形的选定值时，您可以围绕背景弧的中心旋转拇指图像。因为我们想要动画运动，仅仅设置拇指图像的旋转是不够的。相反，我们使用RotateAnimation一种类似的方式：
final RotateAnimation animRotate = new RotateAnimation(0.0f, -90.0f, // You have to replace these values with your calculated angles
RotateAnimation.RELATIVE_TO_SELF, // This may be a tricky part. You probably have to change this to RELATIVE_TO_PARENT
0.5f, // x pivot
RotateAnimation.RELATIVE_TO_SELF,
0.5f); // y pivot
animRotate.setDuration(1500);
animRotate.setFillAfter(true);
animSet.addAnimation(animRotate);
thumbView.startAnimation(animSet);
我猜这远非最终结果，但它很可能会帮助您寻找所需的解决方案。您的枢轴值必须参考背景弧的中心非常重要，因为这是您的拇指图像应该旋转的点。
我已经用 API 级别 16 和 22、23 测试了我的（完整）代码，所以我希望这个答案至少能给你关于如何解决问题的新想法。
请注意，onDraw方法中的分配操作是一个坏主意，应该避免。为简单起见，我没有遵循这个建议。此外，代码将用作正确方向的指南，而不是简单地复制和粘贴，因为它大量使用幻数并且通常不遵循良好的编码标准。
