Android:如何动态地仅在屏幕的一部分上制作画布?

时间:2018-04-28 04:31:43

标签: android canvas layout

在android中,当用户执行操作时,如何在画面的一部分上显示可绘制的画布?

我的最终目标是动态地在布局中插入一个条形图,当用户触摸它时,条形图上会显示一个特定的文本。

我已经搜索过了,我只看到了将画布作为布局本身处理的方法;不是可以添加到活动的视图。我的理解是,为了使它只是屏幕的一部分,我不得不将其作为可以添加到布局的视图来处理。我该怎么做?

1 个答案:

答案 0 :(得分:0)

要创建画布,请创建自定义视图,如下所示:

public class CanvasView extends View {

public int width;
public int height;
private Bitmap mBitmap;
private Canvas mCanvas;
private Path mPath;
Context context;
private Paint mPaint;
private float mX, mY;
private static final float TOLERANCE = 5;

public CanvasView(Context c, AttributeSet attrs) {
    super(c, attrs);
    context = c;

    // we set a new Path
    mPath = new Path();

    // and we set a new Paint with the desired attributes
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setColor(Color.BLACK);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeWidth(4f);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

    // your Canvas will draw onto the defined Bitmap
    mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    mCanvas = new Canvas(mBitmap);
}

// override onDraw
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // draw the mPath with the mPaint on the canvas when onDraw
    canvas.drawPath(mPath, mPaint);
}

// when ACTION_DOWN start touch according to the x,y values
private void startTouch(float x, float y) {
    mPath.moveTo(x, y);
    mX = x;
    mY = y;
}

// when ACTION_MOVE move touch according to the x,y values
private void moveTouch(float x, float y) {
    float dx = Math.abs(x - mX);
    float dy = Math.abs(y - mY);
    if (dx >= TOLERANCE || dy >= TOLERANCE) {
        mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
        mX = x;
        mY = y;
    }
}

public void clearCanvas() {
    mPath.reset();
    invalidate();
}

// when ACTION_UP stop touch
private void upTouch() {
    mPath.lineTo(mX, mY);
}

//override the onTouchEvent
@Override
public boolean onTouchEvent(MotionEvent event) {
    float x = event.getX();
    float y = event.getY();

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            startTouch(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            moveTouch(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            upTouch();
            invalidate();
            break;
    }
    return true;
}
}

之后将此canvasView用于xml文件:

<com.example.canvasdemo.CanvasView
    android:id="@+id/signature_canvas"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textColor="@color/colorWhite" />

最后进入你的主要活动:

public class MainActivity extends AppCompatActivity {

Button btnClear;
private CanvasView customCanvas;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    customCanvas = (CanvasView) findViewById(R.id.signature_canvas);
    btnClear = (Button) findViewById(R.id.button1);


    btnClear.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            customCanvas.clearCanvas(); // to clear canvas
        }
    });


}

example picture