是指在进行画布缩放操作时,画布的绘制位置与手指位置不一致的现象。
这种情况通常发生在移动设备上,当用户使用手指进行缩放操作时,由于缩放中心点的变化,导致画布的绘制位置发生偏移。这可能会导致用户在进行缩放操作时,画布的内容出现错位或不准确的情况。
为了解决这个问题,可以采取以下方法:
总结起来,解决缩放时画布不在手指位置上绘制的问题,可以通过使用变换矩阵、更新绘制坐标或使用触摸事件等方法来实现。具体的实现方式可以根据具体的开发需求和平台特性来选择。
一、鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 ---- 鼠标指针指向界面中的 Canvas 画布某个位置 , Canvas 画布中绘制着一张超大图片 , 以该位置为中心 , 滑动鼠标滚轮时进行缩放...; 使用鼠标滚轮缩放后 , 在 Canvas 中绘制的图片的尺寸肯定是放大或者缩小了 , 尺寸发生了改变 ; 图片缩放时 , 鼠标指针指向一个位置 , 该位置对应着一个当前 Canvas 画布中的 x..., y 坐标 , 同时可以计算出当前位置对应的图片中的 水平方向的比例 和 垂直方向的比例 ; 在缩放后的图片中 , 只要保证鼠标指针指向相同的 x, y 坐标时 , 该位置对应的 水平方向的比例 和..., 并设置图片位置 ; 这样图片缩放时 , 始终可以保证鼠标指向的部位保持位置不变 ; 1、保存当前鼠标指针指向的位置 首先 , 在类中定义如下成员字段 , pointer_x 和 pointer_y...= (int) (pointer_y - canvasY); } 二、绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 ---- 1、代码示例 import
+ 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 ---- 在 【Java AWT 图形界面编程】Canvas 中绘制超大图片 ( 使用鼠标拖动查看全图 | 设置...JFrame 窗口自动关闭 | 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 ) 博客中 , 绘制了超大图像 , 可以使用鼠标拖动 ; 在 【Java AWT 图形界面编程】使用鼠标滚轮放大缩小...Canvas 画布 ( 鼠标滚轮事件监听器 MouseWheelListener ) 博客中 , 新增鼠标滚轮缩放画布示例 , 但是使用鼠标拖动时 , 拖动的效果也随之缩放, 如 缩小画布后 , 移动鼠标..., 移动距离对应的缩放效果也随之缩小 ; 在 【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布中绘制的背景图像 ( 鼠标滚轮事件监听器 MouseWheelListener...| Canvas 中绘制图像并设置图像大小 ) 博客中 , 使用缩放背景图像的方式 , 实现缩放效果 , 并同时福袋鼠标指针拖拽效果 ; 本博客中实现的案例 , 在上面的基础上 , 添加了鼠标滚轮缩放的中心点设置为当前鼠标中心点
Part2: 涂鸦画布 简介 下面来介绍涂鸦画布的创建以及将手指在屏幕上触摸的位置绘制贴图。...首先讨论坐标系的转换,引入画布之后,现在相关的坐标系又多了一个画布的坐标系,手指在屏幕上触摸之后,如何让图案最终在触摸的位置画出来呢?...这里的方法是先计算触摸点相对于人脸鼻尖的位置,因为涂鸦画布是将画布中心对准了人脸鼻尖位置,所以再通过算出来的相对位置转换成涂鸦画布上的对应位置,以保证它在涂鸦画布上还是手指触摸的那个地方。...这里有一点需要注意的是,假设涂鸦画布的实际尺寸是600*600,它随人脸进行缩放后,它的实际尺寸仍然是600*600,只不过显示的时候被缩放了,因此在将触摸点转换成涂鸦画布上的对应点时,仍要按涂鸦画布是...现在可以将手指在屏幕上触摸时在onTouchEvent()回调中所得到的触摸坐标正确地转换成涂鸦画布中的坐标了,那么如何在对应的坐标点画涂鸦图案呢?
//设置图形重叠时的处理方式 /** * SRC_IN:取两层绘制交集。...设置线条的起始点准备绘制 path.moveTo(currX, currY); break; case MotionEvent.ACTION_MOVE: //滑动时,绘制路径 path.lineTo(currX...invalidate(); return true; } 这个就很简单,手指按下时记录位置,path.moveTo给path设置起始点位置,移动时通过path.lineTo()方法记录路径,同时使用 canvas.drawPath...通过回调,实时把bitmap显示出去 listener.bitmapChangeListener(newBitmap); break; case MotionEvent.ACTION_UP: //抬起手指时...//回调接口 public interface bitmapListener { //实时的把绘制的bitmap显示在imageview 上 void bitmapChangeListener(Bitmap
清空之前的操作,新一轮的绘制图案开始(2). 检查当前按下的点与九宫格中的点是否吻合,如果吻合,将判断第一次是否选中九宫格中的点这个标识位置为true 2、移动: (1)....如果第一次选中九宫格中的点,将手指在移动且手指按下的点不是九宫格中的点这个标识位置为true 3、抬起: (1)....isInit) { //初始化点 initPoints(); } //绘制——将点绘制到画布上 pointToCanvas...return point; } } } return null; } /** * 将点绘制到画布上...bitmapR, point.y - bitmapR, mPaint); } } } } /** * 将线绘制到画布上
Touch事件分类 touchstart:当手指触摸屏幕时触发。...不管有多少个手指放在了屏幕上,只要再触摸一下屏幕就会触发 touchmove:当手指在屏幕上滑动的时候触发该是事件,在这期间可以通过event.preventDefault()来阻止滚动 touchend...如果我们在视网膜屏幕上绘制图像,会发现按像素1:1绘制出来的效果会不清晰,这就要用到devicePixelRatio属性。...其中有这么一个方法 ctx.scale(scalewidth,scaleheight); scale() 方法缩放当前绘图,更大或更小。 如果您对绘图进行缩放,所有之后的绘图都会被缩放。...定位、宽高和画笔的大小都会被缩放。 如果您 scale(2,2),那么绘图将定位于距离画布左上角两倍远的位置。
layout:对应 onLayout() 方法,确定view的四个顶点,即确定View在父容器中的位置。 draw:对应 onDraw(),绘制View。...在自定义 View 时我们也正是在 onDraw() 方法内可以在 Canvas 画布上随心所欲的画出我们想要的 View。...其实在自定义 View 过程中,难点往往不是怎么使用画笔本身,而是绘制出预期效果的思路,例如:你想通过自定义 View 来做一个折线图控件,传入一组数据怎么确定这些数据在画布上对应点的相对坐标,而确定点的坐标就需要通过相关的数学公式来计算了...新建一个继承 View 的类,添加构造方法,设置 Paint 画笔,重写 onDraw() 方法,先在画布上以最简单的方式话一个半径为100的圆。...大家也可以在此基础上稍微再扩展一下,例如:通过 event.getX() 和 event.getY() 获取触摸点的坐标,判断出点是否落在了圆形区域内,从而使只有点手指点到圆形区域内才改变颜色,否则不改变
Canvas鼠标滚轮缩放以及画布拖动 本文会带大家认识Canvas中常用的坐标变换方法 translate 和 scale,并结合这两个方法,实现鼠标滚轮缩放以及画布拖动功能。...translate 方法 语法: translate(x, y) translate 的用法记住一句话: “translate 方法重新映射画布上的(0, 0)位置。...事件坐标系 在构造函数中添加对 Canvas 的 mousedown 事件监听,记录点击鼠标时相对屏幕的位置 x 和 y。...画布的整体偏移量记录在 offset.x 和 offset.y,鼠标触发 mousedown 事件时,记录当前鼠标点击的位置相对于屏幕的坐标 x, 和 y,并且开始监听鼠标的 mousemove 和 mouseup...this.offset.y); this.ctx.scale(this.scale, this.scale); this.draw(); } 总结 本文从基础原理到代码实现,完整给大家讲解了 Canvas 画布绘制中经常会遇到的画布拖动和鼠标滚轮缩放功能
2倍 使用ctx.scale(2,2)设置绘制的东西也放大2倍 在canvas的父元素上使用缩放,使用css3的 transform:scale(0.5,0.5)即可,意思为缩放到原来的2倍大小,和canvas...提示 canvas 绘图时,会从两个物理像素的中间位置开始绘制并向两边扩散 0.5 个物理像素。...当设备像素比为 1 时,一个 1px 的线条实际上占据了两个物理像素(每个像素实际上只占一半),由于不存在 0.5 个像素,所以这两个像素本来不应该被绘制的部分也被绘制了,于是 1 物理像素的线条变成了...(一个不在屏幕上实际显示的画布) // 离屏canvas const offscreen = new OffscreenCanvas(200, 200); 通过transferToImageBitmap..., w, h); context.closePath(); this.clicked = context.isPointInPath(point.x, point.y); 2.3 离屏绘制 每个图形在离屏画布上绘制一个大小状态一样的图片
文章目录 一、使用鼠标滚轮放大缩小 Canvas 画布 - 要点分析 1、鼠标滚轮事件 2、核心代码示例 二、绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放示例 1、代码示例 2、效果展示 一、使用鼠标滚轮放大缩小..., 通过 MouseWheelEvent 对象 , 获取鼠标滚轮的滑动方向 , 向上滑动时 , 放大画布 , 画布增加 10% ; 向下滑动时 , 缩小画布 , 画布缩小 10% ; 一旦 scale...缩放比例发生改变 , 立刻 调用 repaint() 函数 重新绘制 Canvas 画布 , 应用该缩放比例 ; // 添加鼠标滚轮监听器 addMouseWheelListener...| 设置 JFrame 窗口自动关闭 | 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 ) 博客中 , 绘制了超大图像 , 可以使用鼠标拖动 , 这里在上述基础上 , 新增鼠标滚轮缩放示例 ;...: 拖动缩小后的画布到中央位置 :
Path(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 分层绘制...int saveLayer = canvas.saveLayer(0, 0, getWidth(), getHeight(), null,Canvas.ALL_SAVE_FLAG); // 把手指轨迹划到目标路径上...Canvas canvas2 = new Canvas(createBitmapDST); canvas2.drawPath(path, paint); // 把目标图像画到画布上...Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { // 记录手指触摸的初始化位置...,和像素单位 opts.inSampleSize = 2; //制定加载器把原图片的宽高缩放到2/1的效果加载 //获得外层图片,decodeResource方法默认获得的像素单位是RGB(red
Canvas canvas = new Canvas(copyBm); //把srcBm的内容绘制在copyBm上 canvas.drawBitmap(srcBm, new Matrix...Canvas canvas = new Canvas(copyBm); //把srcBm的内容绘制在copyBm上 canvas.drawBitmap(srcBm, new Matrix...event.getAction()) { //触摸屏幕 case MotionEvent.ACTION_DOWN: //得到触摸屏幕时手指的坐标...内衣照在以下,用户滑动屏幕时。触摸的是外衣照。把手指经过的像素都置为透明。...,A画布显示至屏幕,B画布在内存中绘制下一帧画面。
画布缩放是图形设计工具中很重要的基础能力。...ok,那么我们看看如何实现缩放画布功能。...坐标系的原点在画布(canvas 元素)的左上角,x 轴向右,y 轴向下。 图形会被绘制到这个平面,理论上它的范围是可以 无限延展 的。(不过实际上我们会给一个上限,但这个值也非常大。...实现思路是: 记录好缩放前,光标所在位置的场景坐标; 计算 (cx, cy) 在旧缩放比(zoom)的场景坐标。...如果缩放时光标不在画布上,比如通过手动输入缩放值时,会 以画布的中心位置进行缩放。
简介 定义:画布,是一种绘制时的规则 是安卓平台2D图形绘制的基础 作用:规定绘制内容时的规则 & 内容 记住:绘制内容是根据画布的规定绘制在屏幕上的 理解为:画布只是绘制时的规则,但内容实际上是绘制在屏幕上的...Canvas的本质 请务必记住: 绘制内容是根据画布(Canvas)的规定绘制在屏幕上的 画布(Canvas)只是绘制时的规则,但内容实际上是绘制在屏幕上的 为了更好地说明绘制内容的本质和Canvas,...总结 绘制内容是根据画布的规定绘制在屏幕上的 内容实际上是绘制在屏幕上; 画布,即Canvas,只是规定了绘制内容时的规则; 内容的位置由坐标决定,而坐标是相对于画布而言的 注:关于对画布的操作(缩放...:绘制之前绘制过的内容 相比于再次调用各种绘图API,使用Picture能节省操作 & 时间 如果不手动调用,录制的内容不会显示在屏幕上,只是存储起来 特别注意:使用绘制矢量图时前请关闭硬件加速,以免引起不必要的问题...所以当放大倍数很大时,会有明显锯齿 当缩放倍数为负数时,会先进行缩放,然后根据不同情况进行图形翻转: (设缩放倍数为(a,b),旋转中心为(px,py)): a0:以px为轴翻转 a>0,
缩放光标因为其样式中心对称的原因,倒是不需要这么多,只要绘制 0 到 179 共 180 个图片。 然后是 精细度的问题。...if (cursor.type === 'rotation') { this.setRotationCursorInCanvas(cursor.degree); } } } 绘制在画布上的光标...就是有些光标是绘制在画布上的。 一个经典的例子就是 AutoCAD 的十字光标,这个十字的长度是可以设置的,可以相当长。 如果你修改操作系统的光标,那这个十字便会突破天际地显示到非绘制区域上。...考虑到性能,建议把光标放到另一个 canvas 上,和图形放一个 canvas 会让画布中没做任何操作的图形频繁重绘。 结尾 总结一下。...一种是用工具批量生产光标图片,一种是利用 svg 在运行时动态生成; 最后是在画布上渲染光标的方案,适合一些有特殊需求的图形编辑器。
简介 定义:画布,是一种绘制时的规则 是安卓平台2D图形绘制的基础 作用:规定绘制内容时的规则 & 内容 1. 记住:绘制内容是根据画布的规定绘制在屏幕上的 2....理解为:画布只是绘制时的规则,但内容实际上是绘制在屏幕上的 ---- 2....Canvas的本质 请务必记住: 绘制内容是根据画布(Canvas)的规定绘制在屏幕上的 画布(Canvas)只是绘制时的规则,但内容实际上是绘制在屏幕上的 为了更好地说明绘制内容的本质和Canvas,...总结 绘制内容是根据画布的规定绘制在屏幕上的 内容实际上是绘制在屏幕上; 画布,即Canvas,只是规定了绘制内容时的规则; 内容的位置由坐标决定,而坐标是相对于画布而言的 注...如果不手动调用,录制的内容不会显示在屏幕上,只是存储起来 特别注意:使用绘制矢量图时前请关闭硬件加速,以免引起不必要的问题!
二、canvas 操作图片 drawImage() 在画布上绘制图像、画布或视频。也能够绘制图片的一部分,增加或减少图像的尺寸。...开始剪切的 x 坐标位置。 sy 可选。开始剪切的 y 坐标位置。 swidth 可选。被剪切图像的宽度。 sheight 可选。被剪切图像的高度。 x 在画布上放置图像的 x 坐标位置。...y 在画布上放置图像的 y 坐标位置。 width 可选。要使用的图像的宽度。(伸展或缩小图像) height 可选。要使用的图像的高度。...水平值(x),以像素计,在画布上放置图像的位置。 dirtyY 可选。水平值(y),以像素计,在画布上放置图像的位置。 dirtyWidth 可选。在画布上绘制图像所使用的宽度。...在画布上绘制图像所使用的高度。 通过 getImageData 复制的指定矩形像素数据,编辑之后,通过 putImageData 方法将图像数据放回画布上。
而第二种方法比前一种多了两个参数,用来控制缩放中心位置的。...); // 绘制蓝色矩形 canvas.drawRect(rect,mPaint); 接下来我们使用第二种方法让缩放中心位置稍微改变一下,如下: // 将坐标系原点移动到画布正中心...新建一个图层,并放入特定的栈中 restore 把栈中最顶层的画布状态取出来,并按照这个状态恢复当前的画布 restoreToCount 弹出指定位置及其以上所有的状态,并按照指定位置的状态进行恢复...画布和图层:画布是由多个图层构成的 实际上我们之前讲解的绘制操作和画布操作都是在默认图层上进行的。...你可以把这些图层看做是一层一层的玻璃板,你在每层的玻璃板上绘制内容,然后把这些玻璃板叠在一起看就是最终效果。
路径 等相关变量 private Bitmap mBitmap;//打开界面时的视图,上面的三个位图都是在这个初始的位图上绘制出来 private Canvas mCanvas;//画布 private...Bitmap.createBitmap(480, 800, Bitmap.Config.ARGB_8888);//创造视图的背景 mCanvas = new Canvas(mBitmap);//在这个背景上加载画布...mBitmapPaint = new Paint(Paint.DITHER_FLAG);//在画布上绘制背景的画笔 mCurPageBitmap = Bitmap.createBitmap...这里稍微解释一下, 当我们对画布进行旋转,缩放,平移等操作的时候其实我们是想对特定的元素进行操作,比如图片,一个矩形等,但是当你用canvas的方法来进行这些操作的时候,其实是对整个画布进行了操作,...那么之后在画布上的元素都会受到影响,所以我们在操作之前调用canvas.save()来保存画布当前的状态,当操作之后取出之前保存过的状态,这样就不会对其他的元素进行影响 2))画出绿色部分的贝塞尔曲线以及阴影的效果
领取专属 10元无门槛券
手把手带您无忧上云