圆圈内的可移动图像
Posted
技术标签:
【中文标题】圆圈内的可移动图像【英文标题】:Movable image within a circle 【发布时间】:2014-09-20 03:38:54 【问题描述】:在这张图片中,圆圈是静态的。矩形图像在这个圆圈的后面。我需要在这个圆圈内移动、缩小、放大和平移矩形图像。如何做到这一点?
给我建议如何做到这一点。
提前致谢
【问题讨论】:
给我建议而不是放下投票兄弟。我会改正我的错误 【参考方案1】:按照指南这样做:
-
采用相对布局
在此布局中添加 ImageView。
现在在其中添加圆形图像。
示例:
<RelativeLayout>
<ImageView /> // image which have to apply movement.
<ImaeView /> // circle shape
</RelativeLayout>
然后应用下面的代码来使用 Imageview 的移动。
用 OnTouchListener 实现 Activity,然后
img.setonTouchListener(this);
@Override
public boolean onTouch(View v, MotionEvent event)
// TODO Auto-generated method stub
view= (ImageView) v;
// make the image scalable as a matrix
view.setScaleType(ImageView.ScaleType.MATRIX);
float scale;
// Handle touch events here...
switch (event.getAction() & MotionEvent.ACTION_MASK)
case MotionEvent.ACTION_DOWN: //first finger down only
savedMatrix.set(matrix);
start.set(event.getX(), event.getY());
Log.d(TAG, "mode=DRAG" );
mode = DRAG;
break;
case MotionEvent.ACTION_UP: //first finger lifted
case MotionEvent.ACTION_POINTER_UP: //second finger lifted
mode = NONE;
Log.d(TAG, "mode=NONE" );
break;
case MotionEvent.ACTION_POINTER_DOWN: //second finger down
oldDist = spacing(event); // calculates the distance between two points where user touched.
Log.d(TAG, "oldDist=" + oldDist);
// minimal distance between both the fingers
if (oldDist > 5f)
savedMatrix.set(matrix);
midPoint(mid, event); // sets the mid-point of the straight line between two points where user touched.
mode = ZOOM;
Log.d(TAG, "mode=ZOOM" );
break;
case MotionEvent.ACTION_MOVE:
if (mode == DRAG)
//movement of first finger
matrix.set(savedMatrix);
if (view.getLeft() >= -392)
matrix.postTranslate(event.getX() - start.x, event.getY() - start.y);
else if (mode == ZOOM) //pinch zooming
float newDist = spacing(event);
Log.d(TAG, "newDist=" + newDist);
if (newDist > 5f)
matrix.set(savedMatrix);
scale = newDist/oldDist; //thinking I need to play around with this value to limit it**
matrix.postScale(scale, scale, mid.x, mid.y);
break;
// Perform the transformation
view.setImageMatrix(matrix);
return true; // indicate event was handled
private float spacing(MotionEvent event)
float x = event.getX(0) - event.getX(1);
float y = event.getY(0) - event.getY(1);
return FloatMath.sqrt(x * x + y * y);
private void midPoint(PointF point, MotionEvent event)
float x = event.getX(0) + event.getX(1);
float y = event.getY(0) + event.getY(1);
point.set(x / 2, y / 2);
希望这对您有所帮助,这是一项简单的任务。
【讨论】:
谢谢 balvinder !.. 这就是我需要的。 但是如果我们使用当时唯一的环形图像,在圆形的imageview后面的imageview的角落,它也显示在圆圈之外,那我们该怎么办?【参考方案2】:看看
TouchImageView
您可以使用类缩放和平移图像视图
【讨论】:
谢谢兄弟!我会试试的【参考方案3】:这个库正是这样做的ProfileView。
它有一个可自定义的圆形视图,其中包含imageview
,它是可扩展的、可移动的并且这些事件是自定义的。
【讨论】:
以上是关于圆圈内的可移动图像的主要内容,如果未能解决你的问题,请参考以下文章