如何移动在 canvas 上绘制的路径对象？

Question

我有一个自定义视图，在其中绘制了一个灰色矩形和一条黑线：

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 处理程序添加到您的自定义视图：

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)  
    }  
}

如何移动在 canvas 上绘制的路径对象？

How can I move a Path object drawn on the canvas?

android

android-custom-view

touch-event

android-canvas