我想在ImageView
。
这是我的布局:
<android.support.constraint.ConstraintLayout
android:id="@+id/constraintLayoutEditImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<RelativeLayout
android:id="@+id/relativeLayoutEditImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
app:layout_constraintBottom_toTopOf="@+id/constraintLayoutEditImageToolbar">
<ImageView
android:id="@+id/imageViewEditImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/light_blue" />
<mobileclient.Droid.HandDrawingCanvasView
android:id="@+id/canvasViewEditImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"/>
</RelativeLayout>
<android.support.constraint.ConstraintLayout
........> //this is the toolbar, etc
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
我关注HandDrawingCanvasView
班级Multi-Touch Tracking in Android example:
public class HandDrawingCanvasView: View
{
// Two collections for storing polylines
Dictionary<int, HandDrawingPolyline> InProgressPolylines = new Dictionary<int, HandDrawingPolyline>();
List<HandDrawingPolyline> CompletedPolylines = new List<HandDrawingPolyline>();
Paint paint = new Paint(PaintFlags.AntiAlias);
public HandDrawingCanvasView(Context context) : base(context)
{
Initialize();
}
public HandDrawingCanvasView(Context context, IAttributeSet attrs) :
base(context, attrs)
{
Initialize();
}
void Initialize()
{
}
// External interface accessed from MainActivity
public Color StrokeColor { set; get; } = Color.Red;
public float StrokeWidth { set; get; } = 2;
public void ClearAll()
{
CompletedPolylines.Clear();
Invalidate();
}
// Overrides
public override bool OnTouchEvent(MotionEvent args)
{
// Get the pointer index
int pointerIndex = args.ActionIndex;
// Get the id to identify a finger over the course of its progress
int id = args.GetPointerId(pointerIndex);
// Use ActionMasked here rather than Action to reduce the number of possibilities
switch (args.ActionMasked)
{
case MotionEventActions.Down:
case MotionEventActions.PointerDown:
// Create a Polyline, set the initial point, and store it
HandDrawingPolyline polyline = new HandDrawingPolyline
{
Color = StrokeColor,
StrokeWidth = StrokeWidth
};
polyline.Path.MoveTo(args.GetX(pointerIndex),
args.GetY(pointerIndex));
InProgressPolylines.Add(id, polyline);
break;
case MotionEventActions.Move:
// Multiple Move events are bundled, so handle them differently
for (pointerIndex = 0; pointerIndex < args.PointerCount; pointerIndex++)
{
id = args.GetPointerId(pointerIndex);
InProgressPolylines[id].Path.LineTo(args.GetX(pointerIndex),
args.GetY(pointerIndex));
}
break;
case MotionEventActions.Up:
case MotionEventActions.Pointer1Up:
InProgressPolylines[id].Path.LineTo(args.GetX(pointerIndex),
args.GetY(pointerIndex));
// Transfer the in-progress polyline to a completed polyline
CompletedPolylines.Add(InProgressPolylines[id]);
InProgressPolylines.Remove(id);
break;
case MotionEventActions.Cancel:
InProgressPolylines.Remove(id);
break;
}
// Invalidate to update the view
Invalidate();
// Request continued touch input
return true;
}
protected override void OnDraw(Canvas canvas)
{
base.OnDraw(canvas);
// Clear canvas to white
paint.SetStyle(Paint.Style.Fill);
paint.Color = Color.Transparent;
canvas.DrawPaint(paint);
// Draw strokes
paint.SetStyle(Paint.Style.Stroke);
paint.StrokeCap = Paint.Cap.Round;
paint.StrokeJoin = Paint.Join.Round;
// Draw the completed polylines
foreach (HandDrawingPolyline polyline in CompletedPolylines)
{
paint.Color = polyline.Color;
paint.StrokeWidth = polyline.StrokeWidth;
canvas.DrawPath(polyline.Path, paint);
}
// Draw the in-progress polylines
foreach (HandDrawingPolyline polyline in InProgressPolylines.Values)
{
paint.Color = polyline.Color;
paint.StrokeWidth = polyline.StrokeWidth;
canvas.DrawPath(polyline.Path, paint);
}
}
}
正如您所见,我甚至可以在图像外部绘制(蓝色区域是ImageView
背景)。如何将可绘制区域限制在图片的边界内?
答案 0 :(得分:0)
首先需要在显示它的ImageView
中找到绘制图像的边界。
完成后,您可以丢弃任何超出该区域的触摸事件。您onTouchEvent
的伪代码将位于以下行中:
Overrides
public override bool OnTouchEvent(MotionEvent touchEvent){
if(!isInsideDesiredArea(touchEvent.getX(), touchEvent.getY()){
return false;
}
... //same with what you have now
}
要查找由ImageView
绘制的drawable的边界,可以使用Rect r = ImageView.getDrawable.copyBounds()
,它将在r
中写入边界。
最后,isInsideDesiredArea(...)
将如下所示:
private boolean isInsideDesiredArea(float x, float y) {
//get the image view
ImageView imageView = (ImageView) findViewById(R.id.my_imageview_id);
//get the transform it applied on the drawable
float[] imageViewTransformMatrixValues = new float[9];
imageView.getImageMatrix().getValues(imageViewTransformMatrixValues);
//get the bounds of the drawn drawable, before the transforms are applied to it, and in local coordinates
Rect drawableRect = imageView.getDrawable().copyBounds();
//get the drawable scale & translation, from its matrix
float scaleX = imageViewTransformMatrixValues[Matrix.MSCALE_X];
float scaleY = imageViewTransformMatrixValues[Matrix.MSCALE_Y];
float translationX = imageViewTransformMatrixValues[Matrix.MTRANS_X];
float translationY = imageViewTransformMatrixValues[Matrix.MTRANS_Y];
//compute the actual bounds of the drawable, within the image view, in image view local coordinates
Rect actualImageRect = new Rect();
actualImageRect.top = Math.round(translationY + scaleY * drawableRect.top);
actualImageRect.left = Math.round(translationX + scaleX * drawableRect.left);
actualImageRect.bottom = Math.round(translationY + scaleY * drawableRect.bottom);
actualImageRect.right = Math.round(translationX + scaleX * drawableRect.right);
//finally check if the touch events are within the rectangle defined by the drawable
return actualImageRect.contains((int) x, (int) y);
}
我在一个小样本项目上测试过,它运行正常。
希望这有帮助。