[英]How to draw Canvas in WebView?
我正在开发一个应用程序,人们可以在WebView中放置圈子。 因此,我的算法是:
因此,起初我能够编写一个在LongClick
上画一个圆的代码,唯一的问题是当我更改比例(缩放)时,圆从原处移动了。 在karaokyo答案的帮助下,我通过添加scale
浮点数Canvas.drawCircle(x * scale, y * scale, 10, p)
(其中scale = getScale()
解决了此移动问题。 不幸的是,出现了新问题-当我绘制圆时,它绘制的坐标错误。 此图显示了我的意思:
public DrawWebView (Context context, AttributeSet attrs)
{
super (context, attrs);
wv1 = (DrawWebView) findViewById(R.id.webView1);
wv1.loadUrl("file://" + Environment.getExternalStorageDirectory() + "/Pictures/ScolDetectPics/boxes.jpg");
wv1.getSettings().setBuiltInZoomControls(true);
wv1.getSettings().setDisplayZoomControls(false);
wv1.getSettings().setSupportZoom(true);
wv1.getSettings().setUseWideViewPort(true);
wv1.getSettings().setLoadWithOverviewMode(true);
wv1.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
mContext = context;
public boolean onTouch(View v, MotionEvent event) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
draw = true;
this.invalidate();
break;
case MotionEvent.ACTION_MOVE:
this.invalidate();
break;
case MotionEvent.ACTION_UP:
this.invalidate();
break;
case MotionEvent.ACTION_CANCEL:
break;
default:
break;
}
return true;
}
@Override
protected void onDraw(Canvas canvas)
{
super.onDraw (canvas);
text = MainActivity.text;
zoomPos = MainActivity.zoomPos;
Paint p = new Paint();
p.setColor (Color.RED);
if(initScale == 0){
initScale = getScale();
}
float scale = getScale();
float refScale = scale/initScale;
if(MainActivity.drawConfirm){
zoomPos = MainActivity.zoomPos;
draw1 = true;
}
canvas.drawCircle(330 * refScale, 618 * refScale, 10, p);
//text.setText(Float.toString(scale));
text.setText(Float.toString(initScale));
canvas.drawCircle(330, 618, 10, p);
if(draw1){
canvas.drawCircle(zoomPos.x * refScale, zoomPos.y * refScale, 10, p);
}
}
}
另外,如果我两次轻按圆圈(两个)都出现在错误的位置,则单击时移到正确的位置。
如果您知道该怎么做或知道一个好的教程,将不胜感激。
[karaokyo答案的更新]
我已经复制了您的代码,但是circle仍然位于错误的位置,实际上, initialScale
值为2.0。 在此图像上清晰可见。 1.圆具有移动的问题,但坐标正确。 2.绕圈而没有移动问题,坐标乘以scale = getScale
。 3.圆而没有移动问题,坐标乘以scale/initScale
要解决圆弧移动问题,您必须根据WebView的缩放比例来调整坐标。 对于长按,请设置一个GestureDetector
,以保存单击位置和当前比例onLongPress
以在onDraw
:
public class DrawWebView extends WebView {
private GestureDetector mDetector;
private float mInitialScale;
private int mX;
private int mY;
public DrawWebView(Context context) {
super(context);
init();
}
public DrawWebView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public DrawWebView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public void init(){
loadUrl("file://" + Environment.getExternalStorageDirectory() + "/Pictures/boxes.jpg");
setWebViewClient(new WebViewClient());
getSettings().setBuiltInZoomControls(true);
getSettings().setDisplayZoomControls(false);
getSettings().setSupportZoom(true);
getSettings().setUseWideViewPort(true);
getSettings().setLoadWithOverviewMode(true);
getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
mDetector = new GestureDetector(getContext(), new GestureDetector.OnGestureListener() {
@Override
public boolean onDown(MotionEvent e) {
return false;
}
@Override
public void onShowPress(MotionEvent e) {
}
@Override
public boolean onSingleTapUp(MotionEvent e) {
return false;
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
return false;
}
@Override
public void onLongPress(MotionEvent e) {
mX = (int) e.getX() + getScrollX();
mY = (int) e.getY() + getScrollY();
mInitialScale = getScale();
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
return false;
}
});
setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return mDetector.onTouchEvent(event);
}
});
}
@Override
protected void onDraw(Canvas canvas)
{
super.onDraw (canvas);
float scale = getScale() / mInitialScale;
Paint p = new Paint();
p.setColor(Color.RED);
canvas.drawCircle(mX * scale, mY * scale, 10, p);
p.setColor(Color.GREEN);
canvas.drawCircle(mX, mY, 5, p);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.