绘制位图沿画布路径 [英] Drawing Bitmap Along a Path on Canvas

问题描述

我想创建绘图应用程序，应用程序就能够沿着在屏幕上触摸的路径不同的画刷纹理。

I am trying to create a Drawing Application, the Application will be able to draw different Brush Textures along the touched path on the Screen.

是我迄今所做的：

这里是我的自定义视图的code：

What i have done so far:
Here is the code of my Custom 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;

}
}

我已经把这个例子code此题<一个href=\"http://stackoverflow.com/questions/8428874/how-to-make-custom-brush-for-canvas-in-android?lq=1\">How使自定义画笔画布在android系统？

的纹理图像，我已经使用：的

The Texture Image that i have used:

什么结果我得到：

What results i am getting :

的结果我想实现：

The Result i want to Achieve :

任何帮助是非常AP preciated。

Any help is highly appreciated.

推荐答案

在每个注册的触摸位置绘制一个位图是一个好的开始，但为了创建一个像你在这里看到了一个流畅的效果，你要需要更多的逻辑在这里。我将概述一些步骤，为您实现：

Drawing one bitmap on every registered touch location is a good start, but in order to create a smooth effect like the one you see here, you're going to need a bit more logic here. I'll outline some steps for you to implement:

1. 您将需要几个bitmeps。一个（或可能的几个）的位图，这将重新present你试图绘制实际行。如果您有更多，效果会更好不线路每一段看起来是一样的。然后另一个位图的线的边缘。


2. 确保你的顶点列表根据您接收到的输入（不知道你在做这个已经与否）排序。此外，你应该走了过来名单，如果两个相邻点之间的距离比你正在绘制的位图的半径小，你应该忽略这一点，因为它不会有太大的对您的绘图效果。您可能要处理这个问题，当你插入点到列表中，因为它会在渲染过程中为你节省计算时间。


3. 在第1顶点，放置一个边缘的位图，然后根据该列表中的第1次顶点之间的角度旋转到第二。
;（ - - p1.y，p2.x p1.x p2.y）您可以根据 Math.atan2知道角

4. 第1点后，每2点之间，你需要画Ñ位图，N为点i和点i-1位图的半径划分之间的距离。你需要为这个内部环路运行此很多步骤，生成一个新的X / Y坐标的每一步。 （{ - p1.x，p2.y - p1.y p2.x}，然后正常化），并在渐进的步骤将它添加到P1可以通过创建从2点的归一化矢量做到这一点。在每一步中，绘制位图和旋转根据如果你有超过1位为内部线3的逻辑，然后随机选择1。


5. 在最后一个顶点，再画一个边位图，再次旋转它根据3的逻辑。

这应该让你开始，虽然你可能希望实现的情况下，更复杂的逻辑，其中线路相交本身 - 在这种情况下，你可能希望有（或建造）的交叉点位图和使用更多的逻辑来确定发生这种情况时，如何相应地旋转位图。

This should get you started, although you may wish to implement more complex logic in cases in which the line intersects itself - in which case you may want to have (or construct) an "intersection" bitmap and use more logic to identify when this happens and how to rotate the bitmap accordingly.

这篇关于绘制位图沿画布路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！