android - 面罩在计步器画布上倾斜

Question

我已经浏览了这个SpeedoMeter精彩的图书馆，他们在画布上创建了一个自定义速度计。简而言之，他们在画布背景和前景上添加 2 个图像，并在速度值发生变化时移动前景图像的矩形蒙版。

我尝试自定义 ImageLinearGauge 的代码以显示垂直方向的进度，并进行了以下更改：

1. 通过将 alpha 值减小到 0 来保持背景图像（仪表）
2. 创建由前景图像（填充）组成的移动矩形
3. 从搜索栏更改进度值时，步骤 2 中创建的蒙版矩形出现在背景之上，给人一种进步的感觉。

我的查询：

我希望这个前景蒙版图像与粉红色区域上的黑线对齐/重叠。尝试了以下方法：

1. 将蒙版矩形沿其中心旋转-20f，但我可以看到动画中的一些不一致。

   rect.set(0, heightPa - (heightPa * getOffsetSpeed()).toInt(), widthPa, heightPa)
   val mat = Matrix()
   mat.setRotate(-20f,  (widthPa/2).toFloat(),(heightPa - (heightPa * getOffsetSpeed()).toInt()/2).toFloat());
   mat.mapRect(rectF)
   canvas.translate(padding.toFloat(), padding.toFloat())
   canvas.drawBitmap(foregroundBitmap, rect, rectF, paint)
   canvas.translate((-padding).toFloat(), (-padding).toFloat())
   

2. 尝试旋转画布 - 保存、旋转和绘图和恢复画布，整个粉红色区域正在旋转。

       canvas.rotate(-20f);//,  (widthPa/2).toFloat(),(heightPa - (heightPa * getOffsetSpeed()).toInt()/2).toFloat());
       mat.mapRect(rectF)
       canvas.translate(padding.toFloat(), padding.toFloat())
       canvas.drawBitmap(foregroundBitmap, rect, rectF, paint)
       canvas.translate((-padding).toFloat(), (-padding).toFloat())
       canvas.restore();
   

有没有其他方法，我可以试试吗？请推荐！！

标签： androidandroid-layoutandroid-canvas