AxeSlide软件项目梳理   canvas绘图系列知识点整理

默认坐标系与当前坐标系

canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸。左上角坐标为x=0,y=0的点称作原点。在默认坐标系中,每一个点的坐标都是直接映射到一个CSS像素上。

但是如果图像的每次绘制都参考一个固定点将缺少灵活性,于是在canvas中引入“当前坐标系”的概念,所谓“当前坐标系”即指图像在此时绘制的时候所参考的坐标系,它也会作为图像状态的一部分。比如rotate旋转操作,改变当前坐标系也就是改变了rotate的参考点,试想下如果没有当前坐标系的概念,无论是旋转,缩放,倾斜等操作不就只能参考画布左上角原点了吗。

注:以下的context均为 getContext("2d")所得的CanvasRenderingContext2D对象。

默认坐标系如下图所示:

1. 如果调用context.translate(100,50),当前坐标系与默认坐标系相对位置如下图

2. 如果调用context.scale(2,2),当前坐标系与原默认坐标系的刻度如下,红色代表当前坐标系

3. 如果调用context.rotate(Math.PI/6)顺时针旋转30度,当前坐标系与默认坐标系相对位置如下图

矩阵变换transform

上文提到的坐标变形的三种方式,平移translate,缩放scale以及旋转rotate都可以通过transform做到。

现在我们先来看看矩阵变换的定义:Context.transform(m11,m12,m21,m22,dx,dy),该方法使用一个新的变化矩阵与当前变换矩阵进行乘法运算。

m11 m21 dx
m12 m22 dy
0 0 1

也就是说假设A(x,y)要变换成B(x’,y’)可以通过乘以上述矩阵即可得到。

1 平移context.translate(dx,dy)

x’=x+dx

y’=y+dy

可以使用context.transform (1,0,0,1,dx,dy)代替context.translate(dx,dy)。

也可以使用context.transform(0,1,1,0.dx,dy)代替。

2 缩放context.scale(sx, sy)

x’=sx*x

y’=sy*y

(其中,sx 和sy分别表示在x轴和y轴上的缩放倍数)

可以使用context.transform(sx,0,0,sy,0,0)代替context.scale(sx, sy);

也可以使用context.transform (0,sy,sx,0, 0,0)代替;

3 旋转context.rotate(θ)

x’=x*cosθ-y*sinθ

y’=x*sinθ+y*cosθ

可以用context.transform(Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180),-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),0,0)替代context.rotate(θ)。

也可以使用context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180), 0,0)替代。

软件项目技术点(2)——Canvas之坐标系转换的更多相关文章

  1. 软件项目技术点(2)——Canvas之获取Canvas当前坐标系矩阵

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操 ...

  2. 软件项目技术点(2)——Canvas之平移translate、旋转rotate、缩放scale

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transf ...

  3. 软件项目技术点(8)—— canvas调用drawImage绘制图片

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本 ...

  4. 软件项目技术点(5)——在canvas上绘制动态网格线

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 grid类的实现 当鼠标在画布上缩放时,网格能跟着我的鼠标滚动而相应的有放大缩小的效果. 下面是具体实现的代码,draw函数里计算出大 ...

  5. 软件项目技术点(6)——结合鼠标操作绘制动态canvas画布

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 我们创建一个类封装了所有鼠标需要处理的事件. export class MouseEventInfo { el: HTMLElemen ...

  6. 软件项目技术点(7)——在canvas上绘制自定义图形

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比 ...

  7. 软件项目技术点(1)——Tween算法及缓动效果

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 Tween算法及缓动效果 软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇 ...

  8. 软件项目技术点(1)——d3.interpolateZoom-在两个点之间平滑地缩放平移

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 软件参考d3的知识点 我们在软件中主要用到d3.js的核心函数d3.interpolateZoom - 在两个点之间平滑地缩放平移.请 ...

  9. 软件项目技术点(9)——如何将gif动态图拆分绘制

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 背景介绍 我们的软件支持插入gif图片,并且展示在软件里是动态的,例如插入下面这张gif图. 在软件里显示的同样是这样的动态效果: 那 ...

随机推荐

  1. 190411Python面向对象编程

    一.面向对象的概念 类:把一类事物的相同特征抽取出来整合到一起就是一个类,类是一个抽象的概念 对象:基于类创建的一个具体的事物 class People(object): '这是一个人类的类' def ...

  2. swarm1

    type 必选项,1表示container,2表示swarm stack,3表示compose stack title 必选项 description 必选项 image 必选项,该应用使用的dock ...

  3. Qt 学习之路 2(39):遍历容器

    Qt 学习之路 2(39):遍历容器 豆子 2013年1月16日 Qt 学习之路 2 29条评论 上一节我们大致了解了有关存储容器的相关内容.对于所有的容器,最常用的操作就是遍历.本章我们将详细了解有 ...

  4. Spring学习笔记(一)—— Spring介绍及入门案例

    一.Spring概述 1.1 Spring是什么 Spring是一个开源框架,是于2003年兴起的一个轻量级的Java开发框架, 由Rod Johnson 在其著作<Expert one on ...

  5. 创建一个流(Stream)可以让Bitmap或Image保存到流里面

    创建一个流(Stream)可以让Bitmap或Image保存到流里面   http://blog.csdn.net/angxiao/article/details/7481465 写文件流       ...

  6. Python面向对象之元类(metaclass)

    点进来看就完事了铁汁!      

  7. gym101964G Matrix Queries seerc2018k题 cdq分治

    题目传送门 题目大意: 二维平面上有q次操作,每次操作可以是添加一个点,也可以是添加一个矩形,问每次操作后,有多少  点-矩形  这样的pair,pair的条件是点被矩形覆盖(边缘覆盖也算). 思路: ...

  8. 页面加载时的div动画

    用@keyframes(动画),实现页面加载时的div动画(不要用js控制,因为当页面加载的时候,js还不一定可以使用) 可以在https://daneden.github.io/animate.cs ...

  9. 页面跳转问题-button 确定提交按钮

    form和ajax不可一起用了,button标签默认是用的form表单,所以导致跳转有问题,form不能和ajax一起用的,切记

  10. [转]NetCat简介

    NetCat是一个非常简单的Unix工具,可以读.写TCP或UDP网络连接(network connection).它被设计成一个可靠的后端(back-end) 工具,能被其它的程序或脚本直接地或容易 ...