java - 沿 Canvas 上的路径绘制位图

Question

我正在尝试创建一个绘图应用程序，该应用程序将能够沿着屏幕上的触摸路径绘制不同的画笔纹理。

到目前为止我做了什么:
这是我的自定义 View 的代码:

public class TestDrawingView extends View{

private Bitmap mBitmapBrush;
private Vector2 mBitmapBrushDimensions;

private List<Vector2> mPositions = new ArrayList<Vector2>(100);

public TestDrawingView(Context context) {
    super(context);
    // TODO Auto-generated constructor stub

    // load your brush here
    mBitmapBrush = BitmapFactory.decodeResource(context.getResources(), R.drawable.test_sand_brush);
    mBitmapBrushDimensions = new Vector2(10, 10);

    setBackgroundColor(0xffffffff);

}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    for (Vector2 pos : mPositions) {
        canvas.drawBitmap(mBitmapBrush, pos.x, pos.y, null);
    }
}

@Override
public boolean onTouchEvent(MotionEvent event) {

    int action = event.getAction();
    switch (action) {
    case MotionEvent.ACTION_MOVE:
        final float posX = event.getX();
        final float posY = event.getY();
        mPositions.add(new Vector2(posX - mBitmapBrushDimensions.x / 2, posY - mBitmapBrushDimensions.y / 2));
        invalidate();
    }

    return true;
}

private static final class Vector2 {
    public Vector2(float x, float y) {
        this.x = x;
        this.y = y;
    }

    public final float x;
    public final float y;

}
}

我从这个问题 How to make custom brush for canvas in android? 中获取了这个示例代码

我用过的贴图:

我得到了什么结果:

我想要达到的结果:

非常感谢任何帮助。

Answer 1

在每个注册的触摸位置上绘制一个位图是一个好的开始，但为了创建像您在此处看到的那样的平滑效果，您将需要更多的逻辑。我将概述一些供您实现的步骤:

1. 你还需要一些bitmeps。一张(或可能是几张)位图，代表您要绘制的实际线条。如果你有更多，效果会更好，因为不是每一段线看起来都一样。然后是线条边缘的另一个位图。
2. 确保您的顶点列表根据您收到的输入进行排序(不确定您是否已经这样做)。此外，您应该查看列表，如果两个相邻点之间的距离小于您正在绘制的位图的半径，您应该忽略该点，因为它不会对您的绘图产生太大影响。您可能希望在向列表中插入点时处理此问题，因为这会在渲染期间为您节省一些计算时间。
3. 在第一个顶点中，放置一个“边缘”位图，然后根据列表中第一个顶点与第二个顶点之间的角度旋转它。根据Math.atan2(p2.y - p1.y, p2.x - p1.x);
可以知道角度
4. 在第一个点之后的每两个点之间，您需要绘制 N 个位图，N 是点 i 和点 i-1 之间的距离除以位图的半径。为此，您需要一个内部循环来运行这么多步骤并为每个步骤生成一个新的 X/Y 坐标。您可以通过从 2 个点({p2.x - p1.x，p2.y - p1.y}，然后归一化)创建一个归一化 vector ，然后逐步将其添加到 p1 来实现。每一步绘制一张位图，按照3中的逻辑旋转。如果内线位图不止1张，则随机选择1张。
5. 在最后一个顶点，再绘制一个边位图，按照3中的逻辑再次旋转。

这应该让你开始了，尽管你可能希望在直线与自身相交的情况下实现更复杂的逻辑 - 在这种情况下你可能希望拥有(或构建)一个“交叉点”位图并使用更多逻辑来识别何时发生以及如何相应地旋转位图。