下面的两个视图之间你的手指画线（ImageViews） [英] Draw lines following your finger between two Views(ImageViews)
本文介绍了下面的两个视图之间你的手指画线（ImageViews）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经使用（看到）大量的跨SO和我需要的到底是绘制两幅图像之间的直线上的布局，查看样例：
I have used(seen) a lot of examples across the SO and what I need exactly is to draw a line between two images view on a layout as:
所有的例子或我所看到的样品，只是扩展了类视图，它是一个类被设置为内容查看作为，
All the examples or samples I have seen, Just extends the class with view and it is That Class is set as ContentView As,
public class DrawView extends View {
Paint paint = new Paint();
public DrawView(Context context) {
super(context);
paint.setColor(Color.BLACK);
}
@Override
public void onDraw(Canvas canvas) {
canvas.drawLine(0, 50, 350, 50, paint);
}
}
和，...
@Override
public void onCreate(final Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
DrawView drawView = new DrawView(this);
setContentView(drawView);
}
其实，这是一个很好的方式，但我怎么能添加这些图片到画布（或）如何加载我布局（XML文件）在它们之间画线。
Actually , it is a nice way but How can I add these Images to the Canvas (or) How to load my Layout (XML file) to draw lines between them.
任何一种轻轻一推也帮助我很多在此工作。谢谢。
Any kind of little push also helps me a lot in this work. Thanks.
推荐答案
我已经实施了这种类型的应用程序。 我张贴我的code，也许这可以帮助你。
I had implemented such kind of application. I'm posting my code, might be this can help you.
MainActivity.java类：
MainActivity.java class:
public class MainActivity extends Activity {
public TableLayout t1;
public TableRow tr1;
public TableRow tr2;
public TableRow tr3;
public ImageButton i11;
public ImageButton i21;
public ImageButton i12;
public ImageButton i22;
public ImageButton i31;
public ImageButton i32;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
t1 = (TableLayout) findViewById(R.id.tableLayout1);
tr1 = (TableRow) findViewById(R.id.tableRow1);
tr2 = (TableRow) findViewById(R.id.tableRow2);
tr3 = (TableRow) findViewById(R.id.tableRow3);
i11 = (ImageButton) findViewById(R.id.ibACol1);
i12 = (ImageButton) findViewById(R.id.ibCCol3);
i21 = (ImageButton) findViewById(R.id.ibBCol1);
i22 = (ImageButton) findViewById(R.id.ibACol3);
i31 = (ImageButton) findViewById(R.id.ibCCol1);
i32 = (ImageButton) findViewById(R.id.ibBCol3);
RelativeLayout rl = (RelativeLayout) findViewById(R.id.RelativeLayout1);
DrawPanel drawingPanel = new DrawPanel(getApplicationContext());
rl.addView(drawingPanel);
}
public class DrawPanel extends View {
private Paint paint;
private Paint paint1;
private Paint paint2;
// Canvas c;
MainActivity m1 = new MainActivity();
int count = 0;
int ans = 0, ansPrev;
int temp1, temp2;
int color = 0;
String str = "";
public boolean tmp;
@SuppressWarnings("rawtypes")
private ArrayList points;
@SuppressWarnings("rawtypes")
private ArrayList strokes;
@SuppressWarnings("rawtypes")
public DrawPanel(Context context) {
super(context);
points = new ArrayList();
// points1 = new ArrayList();
// points2 = new ArrayList();
strokes = new ArrayList();
paint = createPaint(Color.BLUE, 11);
paint1 = createPaint(Color.GREEN, 11);
paint2 = createPaint(Color.RED, 11);
}
@SuppressWarnings("rawtypes")
public void onDraw(Canvas c) {
super.onDraw(c);
// this.setBackgroundColor(Color.WHITE);
for (Object obj : strokes) {
drawStroke((ArrayList) obj, c, color);
}
drawStroke(points, c, color);
color = 0;
}
@SuppressWarnings({ "unchecked", "rawtypes" })
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getActionMasked() == MotionEvent.ACTION_MOVE) {
points.add(new Point((int) event.getX(), (int) event.getY()));
color = getColor();
invalidate();
}
if (event.getActionMasked() == MotionEvent.ACTION_UP) {
try {
ansPrev = ans;
for (int r = 0; r < t1.getChildCount(); r++) {
int y = (int) t1.getChildAt(r).getY();
if ((int) event.getY() >= y
&& (int) event.getY() < (y + t1.getChildAt(r)
.getHeight())) {
// View v = t1.getChildAt(r);
for (int i = 0; i < ((TableRow) t1.getChildAt(r))
.getChildCount(); i += 2) {
int x1 = (int) tr1.getChildAt(i).getX();
if ((int) event.getX() >= x1
&& (int) event.getX() < (x1 + tr1
.getChildAt(i).getWidth())) {
// Toast.makeText(getApplicationContext(),
// "Row "+(r+1)+", Column "+(i+1)+"Selected.",
// Toast.LENGTH_SHORT).show();
if (count == 1) {
// str =
// (String)((ImageButton)((TableRow)t1.getChildAt(r)).getChildAt(i)).getContentDescription();
int len1 = (int) ((ImageButton) ((TableRow) t1
.getChildAt(temp1))
.getChildAt(temp2))
.getContentDescription()
.length();
int len2 = (int) ((ImageButton) ((TableRow) t1
.getChildAt(r)).getChildAt(i))
.getContentDescription()
.length();
String str1 = (String) ((ImageButton) ((TableRow) t1
.getChildAt(r)).getChildAt(i))
.getContentDescription()
.subSequence(0, 1);
if (str1.equals(str) && len1 != len2) {
ans = ans + 1;
tmp = true;
color = 1;
// drawStroke(points, c, color);
((ImageButton) ((TableRow) t1
.getChildAt(temp1))
.getChildAt(temp2))
.setSelected(false);
Toast.makeText(
getApplicationContext(),
"Answer Matched. \n Your score is: "
+ ans,
Toast.LENGTH_SHORT).show();
count = 0;
} else {
ans = ans - 1;
tmp = false;
color = 2;
// drawStroke(points, c, color);
((ImageButton) ((TableRow) t1
.getChildAt(temp1))
.getChildAt(temp2))
.setSelected(false);
Toast.makeText(
getApplicationContext(),
"Answer not Matched. \n Your score is: "
+ ans,
Toast.LENGTH_SHORT).show();
count = 0;
}
// Toast.makeText(getApplicationContext(),
// "Image "+(i+r+1)+" : "+str+((ImageButton)((TableRow)t1.getChildAt(r)).getChildAt(i)).isSelected(),
// Toast.LENGTH_SHORT).show();
// count=0;
}
}
}
}
// Toast.makeText(getApplicationContext(),
// "Color: "+color, Toast.LENGTH_SHORT).show();
}
} catch (Exception e) {
e.printStackTrace();
}
// points2.clear();
// points = new ArrayList();
// invalidate();
this.strokes.add(points);
points = new ArrayList();
invalidate();
}
return true;
}
public int getColor() {
return color;
}
private void drawStroke(@SuppressWarnings("rawtypes") ArrayList stroke,
Canvas c, int i1) {
if (stroke.size() > 0 && i1 == 0) {
Point p0 = (Point) stroke.get(0);
for (int i = 1; i < stroke.size(); i++) {
Point p1 = (Point) stroke.get(i);
c.drawLine(p0.x, p0.y, p1.x, p1.y, paint);
p0 = p1;
}
} else if (stroke.size() > 0 && i1 == 1) {
Point p0 = (Point) stroke.get(0);
for (int i = 1; i < stroke.size(); i++) {
Point p1 = (Point) stroke.get(i);
c.drawLine(p0.x, p0.y, p1.x, p1.y, paint1);
p0 = p1;
}
} else if (stroke.size() > 0 && i1 == 2) {
Point p0 = (Point) stroke.get(0);
for (int i = 1; i < stroke.size(); i++) {
Point p1 = (Point) stroke.get(i);
c.drawLine(p0.x, p0.y, p1.x, p1.y, paint2);
p0 = p1;
}
}
}
private Paint createPaint(int color, float width) {
Paint temp = new Paint();
temp.setStyle(Paint.Style.STROKE);
temp.setAntiAlias(true);
temp.setColor(color);
temp.setStrokeWidth(width);
temp.setStrokeCap(Cap.ROUND);
return temp;
}
}
}
main.xml中布局文件：
main.xml Layout File:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TableLayout
android:id="@+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<TableRow
android:id="@+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="20dp" >
<ImageButton
android:id="@+id/ibACol1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/edu1"
android:contentDescription="@string/A" />
<TextView
android:id="@+id/textView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="" />
<ImageButton
android:id="@+id/ibCCol3"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/edu3"
android:contentDescription="@string/Cat" />
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="20dp" >
<ImageButton
android:id="@+id/ibBCol1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/edu2"
android:contentDescription="@string/B" />
<TextView
android:id="@+id/textView2"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="" />
<ImageButton
android:id="@+id/ibACol3"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/edu1"
android:contentDescription="@string/Apple" />
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="20dp" >
<ImageButton
android:id="@+id/ibCCol1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/edu3"
android:contentDescription="@string/C" />
<TextView
android:id="@+id/textView3"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="" />
<ImageButton
android:id="@+id/ibBCol3"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/edu2"
android:contentDescription="@string/Bee" />
</TableRow>
</TableLayout>
您需要添加图像的绘制文件夹，这将适用于API级别11起。
You need to add images to for drawable folder, and this will work for api-level 11 and onwards.
这篇关于下面的两个视图之间你的手指画线（ImageViews）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
