canvas.translate(x,y)一点新的认识

最新推荐文章于 2024-08-11 18:03:48 发布
转载 最新推荐文章于 2024-08-11 18:03:48 发布 · 377 阅读 · 0
文章标签：

#api #java

本文澄清了canvas.translate(x,y)在绘图中的误解，详细解释了该函数如何改变原点的位置，实际上是将原点沿x轴和y轴方向偏移指定距离，而非直接设置新的原点位置。

之前对于canvas.translate(x,y)的理解有的错误，之前一直以原点（0,0）为基准点，作用就是移动原点，默认的原点（0，0）是在屏幕左上角的，你可以通过translate（x，y）把点（x，y）作为原点，就一直以为这个(x,y)就是新的坐标原点。但看一下API就会知道，这种理解是不对的，不过API上面讲解的也不太清楚：

[java]  view plain copy
  1. public void translate (float dx, float dy)  
  2.   
  3. Since: API Level 1  
  4. Preconcat the current matrix with the specified translation  
  5. Parameters  
  6. dx  The distance to translate in X  
  7. dy  The distance to translate in Y  
其实是原来的原点分别在x轴和y轴偏移多远的距离，然后以偏移后的位置作为坐标原点。也就是说原来在（100,100）,然后translate（1，1）新的坐标原点在（101,101）而不是（1,1）

canvas笔记-图形变换(位移translate、缩放scale、变换矩阵transform)
IT1995的博客
06-01 4880
这里首先演示下位移，这里使用的函数是translate(x,y)这个函数是叠加的，也就是说，当translate(100,100)，后再次调用translate(200,200)，那么最后圆点的基准值就为translate(300,300)。 也就是说如果要实现某个图形的位移后，还要变回来。 代码如下： translate(100, 100); //TODO ... ... translate(-100, -100); 或者使用如下的方式： save(); //保存当前图形状态 Res...
vue怎么实现canvas的触摸滚动画布的功能（提供两种方案）
m0_73298638的博客
07-04 700
触屏拖动 canvas 画布
HTML5 Canvas API 变换(translate函数)
william 成长路上
07-16 741
HTML5 Canvas API 变换(translate函数) 下面我们来看下在canvas上绘制图像的另一种方式——变换(translate函数的应用）： 下面的代码：我们还是实现上篇文章的效果：画一条斜线。理论上的知识，自己买书去看吧！ 转换 #diagonal { border: 1px so
canvas的translate、scale、rotate等方法
fengyee_zju的专栏
11-27 3万+
1.translate(x,y):平移，将画布的坐标原点向左右方向移动x，向上下方向移动y.canvas的默认位置是在（0,0）.     例子：画布原点假如落在（1，1），那么translate（10，10）就是在原点（1，1）基础上分别在x轴、y轴移动10，则原点变为（11,11）。 2.scale（x,y）：扩大。x为水平方向的放大倍数，y为竖直方向的放大倍数。 3.rota
Android自定义-⭐️画布认识⭐️
Stay hungry, stay foolish!!
02-25 471
一、ECharts的折线图 ECharts相信大家都见识过其强大，那么android和Flutter能否达到如此的效果呢？毫无疑问，自定义绘制无所不能,接下来我们逐渐的深入到移动端自定义中,去搞定ECharts中的精美的折线图、饼图、散列点、K线图、雷达图、关系图等… 1. 2. 3. 4. 二、Android和Flutter中涉及到的知识 0.Canvas画布的变换和状态保存1.Android自定义中绘制折线相关API 2.Android中绘制圆圈3.文字的绘制4.基本动画的使用。5.绘制中Pa
javascript结合Canvas 实现简易的圆形时钟.docx
01-18
- `Canvas.Point(x, y)`: 定义一个表示点的构造函数。 ##### 4. 实现时钟类 - 定义时钟的各种属性，如半径、刻度长度等。 - 实现绘制圆心、背景、时针等功能的方法。 ##### 5. 绘制圆心 - 使用`translate()`进行...
图片在 canvas 中的 选中/平移/缩放/旋转，包含了所有canvas的2D变化，让你认识到数学的重要性...
小结巴巴的博客
09-25 1321
1、介绍   　　canvas 已经出来好久了，相信大家多少都有接触。 　　如果你是前端页面开发/移动开发，那么你肯定会有做过图片上传处理，图片优化，以及图片合成，这些都是可以用 canvas 实现的。 　　如果你是做前端游戏开发的，可能会非常熟悉，或者说对几何和各种图形变化非常了解。 　　这里我介绍的是简单的、基本的，但是非常完全的一个 2d 的 canvas 案例。 　　...
canvas知识点总结
qq_34109078的博客
06-06 1134
由于项目中很少涉及canvas相关的知识，我就一直拖着没练习，最近面试了几家公司都问到了对canvas的了解，是时候好好研究一下canvas了，以下是我阅读HTML5和CSS3权威指南这本书关于canvas的总结一. canvas一般用来干啥我当时对canvas的抵触点就在于，这不就是个用来画图的吗，能干啥呢，老听别人说他很强大，自己没啥感觉，直到前几天自己动手写了canvas画图小程序，那成就感满
canvas 图像旋转与翻转姿势解锁
凹凸实验室
05-25 2986
多图预警，数学不好可直接跳至文末小结。需求背景从一个游戏需求说起：技术选型：canvas上图所展示的游戏场景，“可乐瓶”里有多个“气泡”，需要设置不同的动画效果，且涉及 deviceOrientation 的交互，需要有大量计算改变元素状态。从性能方面考虑，canvas 是不二的选择。技术点：canvas 绘制图像通过对游戏场景的进一步分析，可见场景中的“气泡”元素形状都是相同的，且不规则，通过 ...
Canvas 变换中心点 translate
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-11 1716
希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。假设我们需要创建一个动态的太阳系模型，每个行星围绕太阳旋转，同时自身也在自转。的其他变换方法灵活组合，创造出丰富的视觉效果。下面的例子展示了如何使用动画循环来创建一个旋转并平移的图形。下面的例子展示了如何使用这些方法来绘制一系列旋转的矩形。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，上下文的一个方法，它接受两个参数，分别代表 x 轴和 y 轴上的偏移量。
canvas常用方法总结
沃德天，倪维胜么，捺莫帅？
10-07 517
canvas常用方法总结 this.canvas 获取上下文canvas元素 fillStyle() 颜色 font='' 字体样式 globalAlpha='' 透明度 globalCompositeOperation=''混合模式 lineCap='' 线条端点的样式 lineDashOffset='' 虚线绘制的偏移距离 lineJoin=''
canvas-变换
nicecode
07-27 249
canvas中的变换 translate(x, y) 我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。 translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量， 在canvas中translate是累加的 rotate(angle) 这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。 旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法 在canvas中ro
【Android学习笔记】 画图
nyza52的博客
10-16 447
基本用到的图形接口： 1.Bitmap，可以来自资源/文件，也可以在程序中创建，实际上的功能相当于图片的存储空间； 2.Canvas，紧密与Bitmap联系，把Bitmap比喻内容的话，那么Canvas就是提供了众多方法操作Bitamp的平台； 3.Paint，与Canvas紧密联系，是"画板"上的笔刷工具，也用于设置View控件上的样式；  4.Drawable，如果说前三者是看不见地在
前端基础学习之h5-canvas入门5-坐标转换（translate、scale、rotate）
no pains,no gains
01-22 1938
1.直线绘制及绘制折线图 2.矩形绘制及绘制渐变矩形 3.曲线绘制及绘制饼状图 4.图片绘制及绘制帧动画 坐标变换 平移 移动画布的原点 translate(x,y) 参数表示移动目标点的坐标 缩放 坐标轴缩放 scale(x,y) 参数表示宽高的缩放比例 旋转 旋转画布原点 rotate(angle) 参数表示旋转角度 实例 1.translate 变的是坐标的原点位置，而不是绘制物的位置 这里先绘制一个起始位置（100,100），宽300，高300的矩形，再使用trans.
canvas变换中心点translate ( 图文示例 )
大剑师兰特的GIS世界
02-03 1101
canvas如何变换中心点呢？通过translate设置就可以。`context.translate(x, y)`; x坐标系水平位移的距离。y坐标系垂直位移的距离。
对canvas的translate()方法的理解
热门推荐
fulianwu的专栏
11-22 4万+
canvas.save();//锁画布(为了保存之前的画布状态) canvas.translate(10, 10);//把当前画布的原点移到(10,10),后面的操作都以(10,10)作为参照点，默认原点为(0,0) drawScene(canvas); canvas.restore();//把当前画布返回（调整）到上一
canvas.translate(x, 0)
truesea's blog of it
02-19 623
void android.graphics.Canvas.translate(float dx, float dy) public void translate (float dx, float dy)   Since: API Level 1   Preconcat the current matrix with the specified translation 在当前坐标
HTML5的学习 （canvas translate和restore的理解）
liyangready的专栏
08-21 904
今天研究了一下canvas画布中的translate方法。 一直以为translate(100,100)里面的参数是坐标点啊，其实是相对位置，坐标系移动后想要移动回去，使用translate(-100,-100)，这玩意儿还能困扰我半天，服了！ 关于restore()的理解，之前用save()方法，然后再进行操作后执行restore()会返回之前的状态。好吧，不是所有状态，比如，你又画了一个正
canvas .translate()
最新发布
01-07
context.translate(x, y); ``` - **参数说明** - `x`: X 轴方向上的偏移量。 - `y`: Y 轴方向上的偏移量。 当调用了 `translate()` 后，所有的绘图指令都会相对于新设定的原点执行。这使得开发者可以更方便地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值