只在位图画布的选定区域绘制路径

Question

所以我目前正在建立儿童涂色书应用程序。我想限制绘制区域，这样它只能在选定的区域绘制路径。例如，如果我触摸了喇叭，那么绘制区域只是喇叭边框内的空间。目前，我只能在位图中绘制路径（绘制区域不受限制）。

第一张图片：触摸区域。

第二张图片：用户只能在蓝色空间内绘制路径。

    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(mBitmapCanvas, 0f, 0f, paintCanvas);
        canvas.drawPath(mPaths, drawPaint);
    }

@Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        float x = motionEvent.getX();
        float y = motionEvent.getY();
        if (isEditable){
            switch (motionEvent.getAction()) {
                case 0:
                    if (paths.isEmpty()) {
                        mBitmap = Bitmap.createBitmap(mBitmapCanvas);
                        paths.add(mBitmap);
                    }
                    mPaths.reset();
                    setColor(ShaderInt);
                    mPaths.moveTo(x, y);
                    mX = x;
                    mY = y;
                    invalidate();
                    break;
                case 1:
                    mPaths.lineTo(mX, mY);
                    mCanvas.drawPath(mPaths, drawPaint);
                    mCanvas.drawPath(mPaths, drawPaint);
                    mBitmap = Bitmap.createBitmap(mBitmapCanvas);
                    paths.add(mBitmap);
                    mPaths.reset();
                    invalidate();
                    break;
                case 2:
                    float abs = Math.abs(x - this.mX);
                    float abs2 = Math.abs(y - this.mY);
                    if (abs >= TOUCH_TOLERANCE || abs2 >= TOUCH_TOLERANCE) {
                        this.mPaths.quadTo(this.mX, this.mY, (this.mX + x) / 2.0f, (this.mY + y) / 2.0f);
                        this.mX = x;
                        this.mY = y;
                    }
                    invalidate();
                    break;
                default:
                    return false;
            }

        } else {
            return false;
        }
        invalidate();
        return true;
    }

有没有什么办法让我可以使绘制区域限制在触摸/选定的区域？如有任何帮助，不胜感激，谢谢！

Answer 1

我建议创建一个初始化为horn形状的路径，并使用Porter Duff操作来合成所需的结果。对您的用例感兴趣的Porter Duff操作可能是dst_in。

为了达到您想要的效果，代码非常简单。在onDraw（画布）回调中，您要做的第一件事是使用具有PorterDuffXfermode集的paint对象绘制自定义的“horn”路径，模式设置为DST_IN。所有随后的调用都将被屏蔽到您的“喇叭”路径的边界。接下来，像往常一样在画布上执行自定义绘图逻辑。

要在“horn”路径之外执行绘制，只需从paint对象中移除Porter Duff xfermode，然后像往常一样继续绘制。我建议您查看PortDuff文档，并非常熟悉绘制代码的顺序，以确保您得到预期的结果，并理解为什么最终结果可能与您预期的不同。当使用波特达夫合成时，你在你的来源之前画出你的目的地；一开始可能说不通。

这里有一个链接，指向一个限制在“圆”路径内绘制位图的示例。