android - 如何移动 Canvas 上绘制的 Path 对象？

Question

我有一个自定义 View ，它在其中绘制一个灰色矩形和一条黑线:

class CustomViewDemo: View {

    private val mRectangleGray = Path()
    private val mLineBlack = Path()

    private lateinit var mRectanglePaint: Paint
    private lateinit var mBarPaint: Paint

    private var marginLeft: Float = 0F
    private var marginBottom: Float = 0F
    private var marginRight: Float = 0F
    private var marginTop: Float = 0F

    private lateinit var mRectSize: RectF
    private lateinit var mLineSize: RectF

    constructor(context: Context?) : super(context) {
        init(null)
    }

    constructor(context: Context?, list: MutableList<String>, timelineWidth: Int) : super(context) {
        init(null)
    }

    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {
        init(attrs)
    }
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    ) {
        init(attrs)
    }

    constructor(
        context: Context?,
        attrs: AttributeSet?,
        defStyleAttr: Int,
        defStyleRes: Int
    ) : super(context, attrs, defStyleAttr, defStyleRes) {
        init(attrs)
    }

    private fun init(attrs: AttributeSet?) {
        mRectanglePaint = Paint()
        mRectanglePaint.isAntiAlias = true
        mRectanglePaint.color = Color.parseColor("#dedede")

        mBarPaint = Paint()
        mBarPaint.style = Paint.Style.FILL
        mBarPaint.color = Color.BLACK
    }

    @SuppressLint("DrawAllocation")
    override fun onDraw(canvas: Canvas) {
        drawRectangle(canvas)
        drawVerticalLine(canvas)
    }

    private fun drawRectangle(canvas: Canvas) {
        marginLeft = 50F
        marginRight = width - 50F
        marginTop = 300F
        marginBottom = 450F

        mRectSize = RectF(marginLeft, marginTop, marginRight, marginBottom)
        mRectangleGray.addRect(mRectSize, Path.Direction.CW)

        canvas.drawPath(mRectangleGray, mRectanglePaint)
    }

    private fun drawVerticalLine(canvas: Canvas) {
        marginLeft = 50F
        marginRight = width - 50F
        marginTop = 300F
        marginBottom = 450F

        mLineSize = RectF(marginRight - 7, marginTop, marginRight, marginBottom)
        mLineBlack.addRect(mLineSize, Path.Direction.CW)

        canvas.drawPath(mLineBlack, mBarPaint)
    }

}

输出:

我想通过触摸灰色矩形的边框来左右移动黑线。

但是，我无法使用 onTouchEvent 做到这一点。 , Drag and move a circle drawn on canvas我尝试根据这个问题的答案来调整它，但我开始绘制不同的黑点，而不是线条。也许我做错了什么，我不知道，但我尝试了很多次。

如何通过触摸在 Canvas 上绘制的 Path 对象在矩形中左右移动？谢谢。

Answer 1

这不会为您提供所需的信息，但足以让您走上正确的道路。

将以下 onTouchEvent 处理程序添加到您的自定义 View :

private var linePositionOffset = 0f  
private var startX = width - 7  
  
override fun onTouchEvent(event: MotionEvent): Boolean {  
    val eventAction = event.action  
  
  val x = event.x.toInt()  
  when (eventAction) {  
        MotionEvent.ACTION_DOWN -> {  
            startX = x  
        }  
        MotionEvent.ACTION_UP -> {}  
        MotionEvent.ACTION_MOVE -> {  
            linePositionOffset = (startX - x).toFloat()  
        }  
  }  
  
    // tell the View to redraw the Canvas  
  invalidate()  
  
    // tell the View that we handled the event  
  return true  
}

并将onDraw()更改为:

override fun onDraw(canvas: Canvas) {  
    drawRectangle(canvas)  
    canvas.withTranslation(-linePositionOffset, 0f) {  
       drawVerticalLine(canvas)  
    }  
}