Path#opの闇にハマって抜け出せなかった - あみゅーの( ･´ｰ･｀)どや

View作りに欠かせないPath｡
API19から追加されたPath#opを触ってみたことについて｡

Path#opで何が出来るか

個人的な感覚ですが､異なる2つのPathを引き算したり､UnionしたりXORしたりすることが出来る便利なやつです｡
例えば､
f:id:amyu_dev:20150623151030g:plain
このようにPathですべて描画しているものに対して､Bottle内の"中のものが減る"ということを計算して再度座標を計算し直すというのはかなり骨が折れます｡
Path#cubicToなどベジェ曲線を使ってる場合はかなりの労力です｡

そこで､Path同士の引き算を行うことによって簡単に実現するわけです｡
今回の飲み物が増えたり減ったりするAnimationでは以下のようになっています｡

mBottleBeerPath.op(mOpPath, Path.Op.DIFFERENCE);
mGlassBeerPath.op(mOpPath, Path.Op.DIFFERENCE);
canvas.drawPath(mGlassPath, mGlassPaint);
canvas.drawPath(mGlassBeerPath, mBeerPaint);
canvas.drawPath(mBottlePath, mBottlePaint);
canvas.drawPath(mBottleBeerPath, mBeerPaint);

イメージ的には
f:id:amyu_dev:20150623152109p:plain
こんな感じですね｡

ハマって抜け出せない闇

Rectでopするとop対象のLinePathが勝手にCloseされて迷惑という話
— あみゅー (@amyu_san) June 23, 2015

コレです｡

public class OpSampleView extends View {

    private Path mMainPath;

    private Path mOpPath;

    private Paint mMainPaint;

    public OpSampleView(Context context) {
        this(context, null, 0);
    }

    public OpSampleView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public OpSampleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        setUpPaint();
        setUpPath();
    }

    private void setUpPaint() {
        mMainPaint = new Paint();
        mMainPaint.setColor(Color.BLUE);
        mMainPaint.setStyle(Paint.Style.STROKE);
        mMainPaint.setStrokeWidth(20);
    }

    private void setUpPath() {
        mMainPath = new Path();
        mOpPath = new Path();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        mMainPath.reset();
        mMainPath.moveTo(w / 2, h / 2);
        mMainPath.lineTo(w / 2 - 300, h / 2 - 300);
        mMainPath.lineTo(w / 2 + 300, h / 2 - 300);

        mOpPath.addRect(0, 0, w / 2, h, Path.Direction.CCW);

        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //mMainPath.op(mOpPath, Path.Op.DIFFERENCE);
        canvas.drawPath(mMainPath, mMainPaint);
    }
}

f:id:amyu_dev:20150623152551p:plain
このように適当にCloseしてないPathのみで描画した線があります｡
当然Closeしていないので三角形は出来上がりません｡
別に三角形を作ることを望んでいないので当たり前です｡

で､次から問題なことです｡

    @Override
    protected void onDraw(Canvas canvas) {
        mMainPath.op(mOpPath, Path.Op.DIFFERENCE);
        canvas.drawPath(mMainPath, mMainPaint);
    }

mMainPath.op(mOpPath, Path.Op.DIFFERENCE);からコメントを外し､左半分を選択しているmOpPathでopすると...
f:id:amyu_dev:20150623152936p:plain
こんな感じに望んでいない形が描画されてしまっているんです...
勝手にCloseされて非常に困ってます｡
うーん､コレほんとどうしよう｡