PathMeasure使用

基本介紹

這個類主要是用來操作Path的，可以獲取path的長度，path上某個點的座標，正切值，還可以獲取部分path

構造方法

public PathMeasure()

//forceClosed 字面意思，path如果不是閉合的，就把他處理成閉合的
public PathMeasure(Path path, boolean forceClosed)

也可以通過set方法來設置path

public void setPath(Path path, boolean forceClosed)

獲取path的長度,就是相當於把path拉成直線的總長度

public float getLength()

獲取某個點的座標
distance，就是相對path起點的距離，大小爲0到length之間。
pos和tan都是個長度爲2的數組，可以爲空，不爲空的話，pos會返回x和y的座標，tan會返回正切值的x和y

public boolean getPosTan(float distance, float pos[], float tan[])

下邊的方法和上邊的作用是一樣的,根據flag來決定matrix是否返回座標和正切值

    public static final int POSITION_MATRIX_FLAG = 0x01;    // must match flags in SkPathMeasure.h
    public static final int TANGENT_MATRIX_FLAG  = 0x02;    // must match flags in SkPathMeasure.h
    public boolean getMatrix(float distance, Matrix matrix, int flags) {
        return native_getMatrix(native_instance, distance, matrix.native_instance, flags);
    }

對比下兩種方法的結果

pathMeasure.getPosTan(move,pos,tan)
pathMeasure.getMatrix(move,matrix,PathMeasure.POSITION_MATRIX_FLAG or PathMeasure.TANGENT_MATRIX_FLAG)
        println("matrix=========$matrix=========${pos[0]}/${pos[1]}=====${tan[0]}/${tan[1]}")

Matrix{[-0.12548596, -0.9920955, 371.04367][0.9920955, -0.12548596, 46.93175][0.0, 0.0, 1.0]}
=========371.04367/46.93175=====-0.12548596/0.9920955

求取部分path
startD：起始距離，和path起點的距離
stopD：結束距離，和path起點的距離
dst：用來保存截取的path數據
startWithMoveTo：這個最好弄成true，false問題多多，可以理解爲true的話，起點就是從startD的位置開始的，
否則就是從dst最後一個點開始的，如果是空的，那麼就是原點0,0

public boolean getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo)

看下圖片好理解點，如下代碼

//move每次加100
pathMeasure.getSegment(move-30,move,pathPart,false)

下圖紅框的部分就是move-30到move的path,因爲startWithMoveTo爲false，所以起點默認是上個path的終點，它直接從上個點弄條線連接到我們move-30的位置，也就是紅框的地方

對比下爲true的就理解了

注意事項

如果多次調用pathMeasure.getSegment(0f,move,pathPart,true)，那麼這個pathPart的路徑是疊加的
如果我們的原始path只有一條路徑，那麼每次把pathPart都reset或者rewind一下比較好。
如果原始的path不止一條路徑，比如上圖，一個圓，一個對號，那麼最好不好reset，要不畫第二條線也就是對號的時候，第一條線圓圈就沒了。

獲取下一條線，如果有的話，會返回true，如果沒有會返回false。
比如上圖我們的Path包含一個圓，一個對號，開始是圓，當我們調用下邊的方法之後，
再調用getLength，getPosTan 等方法，獲取到的都是對號的長度，對號上的座標

    /**
     * Move to the next contour in the path. Return true if one exists, or
     * false if we're done with the path.
     */
    public boolean nextContour() {
        return native_nextContour(native_instance);
    }

問題

在測試中還碰到個問題，沒搞明白
執行如下的代碼，每次都清空path，然後startWithMoveTo爲false，所以起點就是原點0,0了

        pathPart.rewind()
        pathMeasure.getSegment(move-100f,move,pathPart,false)

結果：它長這樣，藍色的線就是結果，
黃色的線是一條二階貝塞爾曲線，起點是原點，終點是move所在位置， 至於控制點，就是move-100和move兩個點所在位置的切線的交點，也就是圖中的黃色的圈圈
2條線看起來很接近，可還是不太一樣，尤其是中間波浪線，差距更大

尤其在上下左右4個點的位置的時候，黃線和藍線差別最大

其他地方都很接近

測試代碼如下

import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View

class StateButton:View{
    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)


    val p=Paint(Paint.ANTI_ALIAS_FLAG).apply {
        style=Paint.Style.STROKE
        strokeWidth=3f
        color=Color.GRAY
    }
    val pMove=Paint().apply {
        style=Paint.Style.STROKE
        strokeWidth=3f
        color=Color.RED
    }
    var radius=0f
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        super.onLayout(changed, left, top, right, bottom)
        if(changed){
            radius=Math.min(width,height)/2f-10
            path.apply {
                addCircle(0f,0f,radius,Path.Direction.CW)

                addPath(Path().apply {
                    moveTo(-radius+1,0f)
                    quadTo(-radius/2f,-radius,0f,0f)
                    quadTo(radius/2,radius,radius-1,0f)
                })
            }
        }
    }
    var path=Path()
    var move=100f
    var pathMeasure=PathMeasure()
    val pos= FloatArray(2)
    val tan= FloatArray(2)
    val pathPart=Path()
    val pm=PathMeasure()
    val pathTemp=Path()
    private fun getDegree(x:Float,y:Float):Double{
        return Math.toDegrees(Math.atan2(y.toDouble(), x.toDouble()))
    }
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        if(radius==0f){
            return
        }
        if(pathMeasure.length==0f){
            pathMeasure.setPath(path,false)
        }

        canvas.save()
        canvas.translate(width/2f,height/2f)

        p.color=Color.GRAY
        canvas.drawPath(path,p)
        p.color=Color.BLUE
        pathPart.rewind()

        pathMeasure.getSegment(move-100f,move,pathPart,false)
        canvas.drawPath(pathPart,p)

        pm.setPath(pathPart,false)
        println("pathPart====${pm.length}========${move}")
        p.color=Color.parseColor("#215980")

        //起始點
        pMove.color=Color.RED
        pathMeasure.getPosTan(move-100,pos,tan)
        canvas.drawCircle(pos[0],pos[1],3f,pMove)
        val temp= floatArrayOf(pos[0],pos[1])
        val tan2= floatArrayOf(tan[0],tan[1])
        //畫切線
        canvas.save()
        val degree=Math.toDegrees(Math.atan2(tan[1].toDouble(), tan[0].toDouble())).toFloat()
        canvas.rotate(degree,pos[0],pos[1])
        canvas.drawLine(pos[0]-100,pos[1],pos[0]+100,pos[1],p)
        canvas.restore()

        //結束點
        pMove.color=Color.BLUE
        pathMeasure.getPosTan(move,pos,tan)
        canvas.drawCircle(pos[0],pos[1],3f,pMove)

        //畫切線
        canvas.save()
        val degree2=Math.toDegrees(Math.atan2(tan[1].toDouble(), tan[0].toDouble())).toFloat()
        canvas.rotate(degree2,pos[0],pos[1])
        canvas.drawLine(pos[0]-100,pos[1],pos[0]+100,pos[1],p)
        canvas.restore()

        //求2條切線的交點
        var d1=getDegree(temp[0],temp[1])
        var d2=getDegree(pos[0],pos[1])
        val halfDegree=(d2-d1)/2.00
        val rBig=radius/Math.cos(Math.toRadians(halfDegree))
        println("degree=========$d1/$d2=======r:$rBig")
        val bigDegree=d1+halfDegree
        val rx=rBig*Math.cos(Math.toRadians(bigDegree))
        val ry=rBig*Math.sin(Math.toRadians(bigDegree))

        //切線的交點
        pMove.color=Color.YELLOW
        canvas.drawCircle(rx.toFloat(),ry.toFloat(),3f,pMove)

        //畫模擬的二階貝塞爾曲線
        pathTemp.apply {
            reset()
            moveTo(0f,0f)
            quadTo(rx.toFloat(),ry.toFloat(),pos[0],pos[1])
        }
        canvas.drawPath(pathTemp,pMove)


        canvas.restore()
        move+=150f
        if(move>pathMeasure.length){

            if(!pathMeasure.nextContour()){
                pathMeasure.setPath(path,false)
                pathPart.reset()
                pathPart.moveTo(radius,0f)
            }
            move=0f
        }
    }
    override fun onTouchEvent(event: MotionEvent): Boolean {

        when(event.actionMasked){

            MotionEvent.ACTION_DOWN->{
                postInvalidateDelayed(50)
            }
        }
        return super.onTouchEvent(event)
    }
}