首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

缩放时画布不在手指位置上绘制

是指在进行画布缩放操作时,画布的绘制位置与手指位置不一致的现象。

这种情况通常发生在移动设备上,当用户使用手指进行缩放操作时,由于缩放中心点的变化,导致画布的绘制位置发生偏移。这可能会导致用户在进行缩放操作时,画布的内容出现错位或不准确的情况。

为了解决这个问题,可以采取以下方法:

  1. 使用变换矩阵:在进行缩放操作时,可以使用变换矩阵来实现画布的缩放和平移。通过计算手指位置与缩放中心点的差值,并将该差值应用到变换矩阵中,可以保证画布在手指位置上正确绘制。
  2. 更新绘制坐标:在进行缩放操作时,可以根据手指位置和缩放比例来更新绘制坐标。通过计算手指位置与缩放中心点的差值,并将该差值乘以缩放比例,可以得到正确的绘制坐标,从而保证画布在手指位置上正确绘制。
  3. 使用触摸事件:在移动设备上,可以使用触摸事件来监听用户的手势操作。通过监听缩放手势事件,并根据手指位置和缩放比例来更新画布的绘制位置,可以确保画布在手指位置上正确绘制。

总结起来,解决缩放时画布不在手指位置上绘制的问题,可以通过使用变换矩阵、更新绘制坐标或使用触摸事件等方法来实现。具体的实现方式可以根据具体的开发需求和平台特性来选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置缩放中心 示例 )

一、鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 ---- 鼠标指针指向界面中的 Canvas 画布某个位置 , Canvas 画布绘制着一张超大图片 , 以该位置为中心 , 滑动鼠标滚轮进行缩放...; 使用鼠标滚轮缩放后 , 在 Canvas 中绘制的图片的尺寸肯定是放大或者缩小了 , 尺寸发生了改变 ; 图片缩放 , 鼠标指针指向一个位置 , 该位置对应着一个当前 Canvas 画布中的 x..., y 坐标 , 同时可以计算出当前位置对应的图片中的 水平方向的比例 和 垂直方向的比例 ; 在缩放后的图片中 , 只要保证鼠标指针指向相同的 x, y 坐标 , 该位置对应的 水平方向的比例 和..., 并设置图片位置 ; 这样图片缩放 , 始终可以保证鼠标指向的部位保持位置不变 ; 1、保存当前鼠标指针指向的位置 首先 , 在类中定义如下成员字段 , pointer_x 和 pointer_y...= (int) (pointer_y - canvasY); } 二、绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置缩放中心 示例 ---- 1、代码示例 import

2.8K10

【Java AWT 图形界面编程】使用小键盘按键缩放 Canvas 画布绘制的背景图像 ( 键盘按键监听 + 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置缩放中心 示例 )

+ 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置缩放中心 示例 ---- 在 【Java AWT 图形界面编程】Canvas 中绘制超大图片 ( 使用鼠标拖动查看全图 | 设置...JFrame 窗口自动关闭 | 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 ) 博客中 , 绘制了超大图像 , 可以使用鼠标拖动 ; 在 【Java AWT 图形界面编程】使用鼠标滚轮放大缩小...Canvas 画布 ( 鼠标滚轮事件监听器 MouseWheelListener ) 博客中 , 新增鼠标滚轮缩放画布示例 , 但是使用鼠标拖动 , 拖动的效果也随之缩放, 如 缩小画布后 , 移动鼠标..., 移动距离对应的缩放效果也随之缩小 ; 在 【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布绘制的背景图像 ( 鼠标滚轮事件监听器 MouseWheelListener...| Canvas 中绘制图像并设置图像大小 ) 博客中 , 使用缩放背景图像的方式 , 实现缩放效果 , 并同时福袋鼠标指针拖拽效果 ; 本博客中实现的案例 , 在上面的基础 , 添加了鼠标滚轮缩放的中心点设置为当前鼠标中心点

1.8K20
  • Android OpenGL开发实践 - 基于OpenGL ES 2.0的Android相机实时图片涂鸦实现思路

    Part2: 涂鸦画布 简介 下面来介绍涂鸦画布的创建以及将手指在屏幕触摸的位置绘制贴图。...首先讨论坐标系的转换,引入画布之后,现在相关的坐标系又多了一个画布的坐标系,手指在屏幕触摸之后,如何让图案最终在触摸的位置画出来呢?...这里的方法是先计算触摸点相对于人脸鼻尖的位置,因为涂鸦画布是将画布中心对准了人脸鼻尖位置,所以再通过算出来的相对位置转换成涂鸦画布的对应位置,以保证它在涂鸦画布还是手指触摸的那个地方。...这里有一点需要注意的是,假设涂鸦画布的实际尺寸是600*600,它随人脸进行缩放后,它的实际尺寸仍然是600*600,只不过显示的时候被缩放了,因此在将触摸点转换成涂鸦画布的对应点,仍要按涂鸦画布是...现在可以将手指在屏幕触摸在onTouchEvent()回调中所得到的触摸坐标正确地转换成涂鸦画布中的坐标了,那么如何在对应的坐标点画涂鸦图案呢?

    7.2K130

    JS中的touch事件与canvas绘图

    Touch事件分类 touchstart:当手指触摸屏幕触发。...不管有多少个手指放在了屏幕,只要再触摸一下屏幕就会触发 touchmove:当手指在屏幕滑动的时候触发该是事件,在这期间可以通过event.preventDefault()来阻止滚动 touchend...如果我们在视网膜屏幕绘制图像,会发现按像素1:1绘制出来的效果会不清晰,这就要用到devicePixelRatio属性。...其中有这么一个方法 ctx.scale(scalewidth,scaleheight); scale() 方法缩放当前绘图,更大或更小。 如果您对绘图进行缩放,所有之后的绘图都会被缩放。...定位、宽高和画笔的大小都会被缩放。 如果您 scale(2,2),那么绘图将定位于距离画布左上角两倍远的位置

    7.5K41

    Android查缺补漏(View篇)--自定义 View 的基本流程

    layout:对应 onLayout() 方法,确定view的四个顶点,即确定View在父容器中的位置。 draw:对应 onDraw(),绘制View。...在自定义 View 我们也正是在 onDraw() 方法内可以在 Canvas 画布随心所欲的画出我们想要的 View。...其实在自定义 View 过程中,难点往往不是怎么使用画笔本身,而是绘制出预期效果的思路,例如:你想通过自定义 View 来做一个折线图控件,传入一组数据怎么确定这些数据在画布对应点的相对坐标,而确定点的坐标就需要通过相关的数学公式来计算了...新建一个继承 View 的类,添加构造方法,设置 Paint 画笔,重写 onDraw() 方法,先在画布以最简单的方式话一个半径为100的圆。...大家也可以在此基础稍微再扩展一下,例如:通过 event.getX() 和 event.getY() 获取触摸点的坐标,判断出点是否落在了圆形区域内,从而使只有点手指点到圆形区域内才改变颜色,否则不改变

    838100

    Canvas鼠标滚轮缩放以及画布拖动(图文并茂版)

    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.5K10

    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 离屏绘制 每个图形在离屏画布绘制一个大小状态一样的图片

    94121

    【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布 ( 鼠标滚轮事件监听器 MouseWheelListener )

    文章目录 一、使用鼠标滚轮放大缩小 Canvas 画布 - 要点分析 1、鼠标滚轮事件 2、核心代码示例 二、绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放示例 1、代码示例 2、效果展示 一、使用鼠标滚轮放大缩小..., 通过 MouseWheelEvent 对象 , 获取鼠标滚轮的滑动方向 , 向上滑动 , 放大画布 , 画布增加 10% ; 向下滑动 , 缩小画布 , 画布缩小 10% ; 一旦 scale...缩放比例发生改变 , 立刻 调用 repaint() 函数 重新绘制 Canvas 画布 , 应用该缩放比例 ; // 添加鼠标滚轮监听器 addMouseWheelListener...| 设置 JFrame 窗口自动关闭 | 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 ) 博客中 , 绘制了超大图像 , 可以使用鼠标拖动 , 这里在上述基础 , 新增鼠标滚轮缩放示例 ;...: 拖动缩小后的画布到中央位置 :

    2.3K30

    Carson带你学Android:自定义View Canvas类使用教程

    简介 定义:画布,是一种绘制的规则 是安卓平台2D图形绘制的基础 作用:规定绘制内容的规则 & 内容 记住:绘制内容是根据画布的规定绘制在屏幕的 理解为:画布只是绘制的规则,但内容实际绘制在屏幕的...Canvas的本质 请务必记住: 绘制内容是根据画布(Canvas)的规定绘制在屏幕画布(Canvas)只是绘制的规则,但内容实际绘制在屏幕的 为了更好地说明绘制内容的本质和Canvas,...总结 绘制内容是根据画布的规定绘制在屏幕的 内容实际绘制在屏幕画布,即Canvas,只是规定了绘制内容的规则; 内容的位置由坐标决定,而坐标是相对于画布而言的 注:关于对画布的操作(缩放...:绘制之前绘制过的内容 相比于再次调用各种绘图API,使用Picture能节省操作 & 时间 如果不手动调用,录制的内容不会显示在屏幕,只是存储起来 特别注意:使用绘制矢量图前请关闭硬件加速,以免引起不必要的问题...所以当放大倍数很大,会有明显锯齿 当缩放倍数为负数,会先进行缩放,然后根据不同情况进行图形翻转: (设缩放倍数为(a,b),旋转中心为(px,py)): a0:以px为轴翻转 a>0,

    2.4K10

    图形编辑器开发:自定义光标

    缩放光标因为其样式中心对称的原因,倒是不需要这么多,只要绘制 0 到 179 共 180 个图片。 然后是 精细度的问题。...if (cursor.type === 'rotation') { this.setRotationCursorInCanvas(cursor.degree); } } } 绘制画布的光标...就是有些光标是绘制画布的。 一个经典的例子就是 AutoCAD 的十字光标,这个十字的长度是可以设置的,可以相当长。 如果你修改操作系统的光标,那这个十字便会突破天际地显示到非绘制区域。...考虑到性能,建议把光标放到另一个 canvas ,和图形放一个 canvas 会让画布中没做任何操作的图形频繁重绘。 结尾 总结一下。...一种是用工具批量生产光标图片,一种是利用 svg 在运行时动态生成; 最后是在画布渲染光标的方案,适合一些有特殊需求的图形编辑器。

    30820

    Canvas类的最全面详解 - 自定义View应用系列

    简介 定义:画布,是一种绘制的规则 是安卓平台2D图形绘制的基础 作用:规定绘制内容的规则 & 内容 1. 记住:绘制内容是根据画布的规定绘制在屏幕的 2....理解为:画布只是绘制的规则,但内容实际绘制在屏幕的 ---- 2....Canvas的本质 请务必记住: 绘制内容是根据画布(Canvas)的规定绘制在屏幕画布(Canvas)只是绘制的规则,但内容实际绘制在屏幕的 为了更好地说明绘制内容的本质和Canvas,...总结 绘制内容是根据画布的规定绘制在屏幕的 内容实际绘制在屏幕画布,即Canvas,只是规定了绘制内容的规则; 内容的位置由坐标决定,而坐标是相对于画布而言的 注...如果不手动调用,录制的内容不会显示在屏幕,只是存储起来 特别注意:使用绘制矢量图前请关闭硬件加速,以免引起不必要的问题!

    3.1K81

    HTML5(六)——Canvas 高级操作

    二、canvas 操作图片 drawImage() 在画布绘制图像、画布或视频。也能够绘制图片的一部分,增加或减少图像的尺寸。...开始剪切的 x 坐标位置。 sy 可选。开始剪切的 y 坐标位置。 swidth 可选。被剪切图像的宽度。 sheight 可选。被剪切图像的高度。 x 在画布放置图像的 x 坐标位置。...y 在画布放置图像的 y 坐标位置。 width 可选。要使用的图像的宽度。(伸展或缩小图像) height 可选。要使用的图像的高度。...水平值(x),以像素计,在画布放置图像的位置。 dirtyY 可选。水平值(y),以像素计,在画布放置图像的位置。 dirtyWidth 可选。在画布绘制图像所使用的宽度。...在画布绘制图像所使用的高度。 通过 getImageData 复制的指定矩形像素数据,编辑之后,通过 putImageData 方法将图像数据放回画布

    1.2K30

    HTML5(六)——Canvas 高级操作

    二、canvas 操作图片 drawImage() 在画布绘制图像、画布或视频。也能够绘制图片的一部分,增加或减少图像的尺寸。...开始剪切的 x 坐标位置。 sy 可选。开始剪切的 y 坐标位置。 swidth 可选。被剪切图像的宽度。 sheight 可选。被剪切图像的高度。 x 在画布放置图像的 x 坐标位置。...y 在画布放置图像的 y 坐标位置。 width 可选。要使用的图像的宽度。(伸展或缩小图像) height 可选。要使用的图像的高度。...水平值(x),以像素计,在画布放置图像的位置。 dirtyY 可选。水平值(y),以像素计,在画布放置图像的位置。 dirtyWidth 可选。在画布绘制图像所使用的宽度。...在画布绘制图像所使用的高度。 通过 getImageData 复制的指定矩形像素数据,编辑之后,通过 putImageData 方法将图像数据放回画布

    1.2K30

    Android自定义系列——4.Canvas操作

    而第二种方法比前一种多了两个参数,用来控制缩放中心位置的。...); // 绘制蓝色矩形 canvas.drawRect(rect,mPaint); 接下来我们使用第二种方法让缩放中心位置稍微改变一下,如下: // 将坐标系原点移动到画布正中心...新建一个图层,并放入特定的栈中 restore 把栈中最顶层的画布状态取出来,并按照这个状态恢复当前的画布 restoreToCount 弹出指定位置及其以上所有的状态,并按照指定位置的状态进行恢复...画布和图层:画布是由多个图层构成的 实际我们之前讲解的绘制操作和画布操作都是在默认图层上进行的。...你可以把这些图层看做是一层一层的玻璃板,你在每层的玻璃板绘制内容,然后把这些玻璃板叠在一起看就是最终效果。

    84140

    2014-11-6Android学习------Android 仿真翻页效果实现--------贝塞尔曲线(二)

    路径 等相关变量 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))画出绿色部分的贝塞尔曲线以及阴影的效果

    1.5K10
    领券