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

前言

在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系。那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢。

具体代码

首先请看下面的一段代码(下文具体解释代码作用):

 window.TrackTransform = function () {
var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
var xform = svg.createSVGMatrix();
var savedTransforms = [];
this.trackTransform=function(ctx) { ctx.getTransform = function () { return xform; }; var save = ctx.save;
ctx.save = function () {
savedTransforms.push(xform.translate(0, 0));
return save.call(ctx);
};
var restore = ctx.restore;
ctx.restore = function () {
xform = savedTransforms.pop();
return restore.call(ctx);
}; var scale = ctx.scale;
ctx.scale = function (sx, sy) {
xform = xform.scaleNonUniform(sx, sy);
return scale.call(ctx, sx, sy);
};
var rotate = ctx.rotate;
ctx.rotate = function (deg) { var radians = deg * Math.PI / 180;
xform = xform.rotate(deg);
return rotate.call(ctx, radians);
};
var translate = ctx.translate;
ctx.translate = function (dx, dy) {
xform = xform.translate(dx, dy);
return translate.call(ctx, dx, dy);
};
var transform = ctx.transform;
ctx.transform = function (a, b, c, d, e, f) {
var m2 = svg.createSVGMatrix();
m2.a = a; m2.b = b; m2.c = c; m2.d = d; m2.e = e; m2.f = f;
xform = xform.multiply(m2);
return transform.call(ctx, a, b, c, d, e, f);
};
var setTransform = ctx.setTransform;
ctx.setTransform = function (a, b, c, d, e, f) {
xform.a = a;
xform.b = b;
xform.c = c;
xform.d = d;
xform.e = e;
xform.f = f;
return setTransform.call(ctx, a, b, c, d, e, f);
};
var pt = svg.createSVGPoint();
//通过原坐标系点x,y求对应当前坐标系的坐标值
ctx.transformedPoint = function (x, y) {
pt.x = x; pt.y = y;
return pt.matrixTransform(xform.inverse());
}
var pt2 = svg.createSVGPoint();
//当前坐标系中的的xy还原到原坐标系坐标值
ctx.transformedPoint2 = function (x, y) {
pt2.x = x; pt2.y = y;
return pt2.matrixTransform(xform);
}
var clearRect = ctx.clearRect;
ctx.clearRect = function (x, y, w, h) {
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
clearRect.call(ctx, x, y, w, h);
ctx.restore();
}
}
}

代码中主要定义了一个类TrackTransform,重写了CanvasRenderingContext2D对象的save,restore,scale,rotate,translate,transform,setTransform,clearRect方法。

TrackTransform类使用

如何使用window.TrackTransform类呢?通过以下两句代码,变量contex的转换方法即进行了重写。

 //初始化矩阵转换; context为 getContext("2d")所得的CanvasRenderingContext2D对象。
var track = new TrackTransform();
track.trackTransform(context);

方法详解

具体解释上面各行代码的作用

1 创建矩阵对象xform

 2     var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
3 var xform = svg.createSVGMatrix();

第2行代码通过createElementNS创建与获取到SVG对象。

第3行代码通过createSVGMatrix()方法创建并返回一个新的2x3的矩阵SVGMatrix矩阵对象赋值到xform。

我们在浏览器中打开开发者工具,到控制台可以输出矩阵看看初始值。

a b c d e f 这6个值就对应了我们在介绍transform方法的那6个参数。这个2x3的矩阵为了方便矩阵运算我们把它扩展为一个3x3的矩阵。

svgMatrix介绍

这里再简单解释下svgMatrix:

svgMatrix的方法和属性如下图(具体可参阅:https://developer.mozilla.org/en-US/docs/Web/API/SVGMatrix)

2 save方法

             savedTransforms.push(xform.translate(0, 0));
return save.call(ctx);

先将xform存储在一个数组savedTransforms中,然后调用原API方法。

3 restore方法

            xform = savedTransforms.pop();
return restore.call(ctx);

从savedTransforms数组中去除最后一个对象,并将其赋值到变量xform,然后调用原API方法。

4 scale方法

            xform = xform.scaleNonUniform(sx, sy);
return scale.call(ctx, sx, sy);

维护xform,将其缩放,然后调用原API方法。

5 rotate方法

        var radians = deg * Math.PI / 180;
xform = xform.rotate(deg);
return rotate.call(ctx, radians);

将角度转为弧度,维护xform将其进行旋转变换,然后调用原API方法。

6 translate方法

            xform = xform.translate(dx, dy);
return translate.call(ctx, dx, dy);

维护xform将其进行平移变换,然后调用原API方法。

7 transform方法

            var m2 = svg.createSVGMatrix();
m2.a = a; m2.b = b; m2.c = c; m2.d = d; m2.e = e; m2.f = f;
xform = xform.multiply(m2);
return transform.call(ctx, a, b, c, d, e, f);
首先声明一个新的矩阵m2,m2赋值为要进行变换的6个参数值,然后xform和m2执行矩阵乘法运算,运算结果赋值到xform将其维护。然后调用原API方法。

8 setTransform方法

            xform.a = a;
xform.b = b;
xform.c = c;
xform.d = d;
xform.e = e;
xform.f = f;
return setTransform.call(ctx, a, b, c, d, e, f);

维护xform的值,然后调用原API方法。

9 clearRect方法

            ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
clearRect.call(ctx, x, y, w, h);
ctx.restore();

首先保存context的当前状态,将画布重置到原始状态(可以理解为坐标系重置到默认坐标系),然后调用原API方法清除画布指定范围内容。清除后调用restore恢复Canvas之前保存的状态。

10 getTeansform方法

ctx.getTransform = function () { return xform; };

接下来介绍的三个方法都是原API没有的。getTeansform直接返回xform,可以看到代表画布矩阵的6个值abcdef。

11 transformedPoint方法

54         var pt = svg.createSVGPoint();
55 //通过原坐标系点x,y求对应当前坐标系的坐标值
56 ctx.transformedPoint = function (x, y) {
57 pt.x = x; pt.y = y;
58 return pt.matrixTransform(xform.inverse());
59 }

通过原坐标系点x,y求对应当前坐标系的坐标值。

createSVGPoint创建的点为(0,0),xform.inverse()是求xform的逆矩阵。MatrixTransform则是通过一种矩阵算法来进行运算得到相应的变形的效果的。矩阵的一些基本算法就不多总结了,以前上课就学过了,网上也有不少讲解。

12 transformedPoint2方法

60         var pt2 = svg.createSVGPoint();
61 //当前坐标系中的的xy还原到原坐标系坐标值
62 ctx.transformedPoint2 = function (x, y) {
63 pt2.x = x; pt2.y = y;
64 return pt2.matrixTransform(xform);
65 }

当前坐标系中的的x,y还原到原坐标系坐标值。

软件项目技术点(2)——Canvas之获取Canvas当前坐标系矩阵的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. 软件项目技术点(2)——Canvas之坐标系转换

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为 ...

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

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

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

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

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

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

随机推荐

  1. DATE类型数据在MySql中减一天的问题

    最近在开发一个教务管理系统,数据库中有教师表(Teacher).学生表(Student)等,其中属性:出生日期(Birthday)为DATE类型. 在执行更新教师操作时,发现未改动教师的出生日期但更新 ...

  2. SDUT OJ 迷之好奇 (字典树 )

    迷之好奇 Time Limit: 2000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description FF得到了一个有n个数字的集 ...

  3. 2A - Stone

    任意一堆移动过后的石子都是整数x的倍数, 那么石子总数显然也应该是x的倍数, 换句话说,x必为石子数总和的一个质因子. 题目要求移动次数尽量小,那么x也应该尽量小. 所以选择石子数总和的最小质因子. ...

  4. C++_异常7-exception类

    C++异常的主要目的是为了设计容错程序提供语言级支持. 即异常使得在程序设计中包含错误处理功能更加容易,以免事后采取一些严格的错误处理方式. 异常的灵活性和相对方便性激励着程序员在条件允许的情况下在程 ...

  5. springLdap 操作ldap示例(增删改查)

    转自:http://blog.csdn.net/sundenskyqq/article/details/9002440 这部分的示例网上的确有很多,但是个人在查找的过程中还是感到不够满意,所以就自己总 ...

  6. 【研究】CVE-2017-11882-Office远程代码执行漏洞复现

    实验环境:win10+kali 工具:koadic,Command43b_CVE-2017-11882.py KALI: root@kali:/opt/koadic-master# ./koadic ...

  7. mutillidae之Insert型注入

    A1:Insert型注入 1.输入内容,确定内容输出位置,确定插入字段顺序 输入test')-- -,页面报错,可知test并非最后一个字段,继续尝试test','123'),页面返回正常,确定tes ...

  8. Win10磁盘利用率高达100%设置修改方法

    Win10磁盘利用率高达100%设置修改方法 Windows Defender关闭 Win10的Windows Defender已经变身成为安全中心,它的运行机制改成了即便是电脑中存在多个杀毒.防护软 ...

  9. (转)linux下进程的进程最大数、最大线程数、进程打开的文件数和ulimit命令修改硬件资源限制

    ulimit命令查看和更改系统限制 ulimit命令详解 ulimit用于shell启动进程所占用的资源,可以用来设置系统的限制 语法格式 ulimit [-acdfHlmnpsStvw] [size ...

  10. TOJ 4394 Rebuild Road

    描述 Once,in a kingdom,there are N cities.M roads have been buit such that from one city you can reach ...