AxeSlide软件项目梳理   canvas绘图系列知识点整理 默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接映射到一个CSS像素上. 但是如果图像的每次绘制都参考一个固定点将缺少灵活性,于是在canvas中引入“当前坐标系”的概念,所谓“当前坐标系”即指图像在此时绘制的时候所参考的坐标系,它也会作为图像状态的一部分.比如rotate旋转操作…

AxeSlide软件项目梳理   canvas绘图系列知识点整理 前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一段代码(下文具体解释代码作用): window.TrackTransform = function () { var svg = document.createElementNS("http://www.w3.org/2000/svg…

AxeSlide软件项目梳理   canvas绘图系列知识点整理 画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描述 translate dx,dx 转换的量的 X 和 Y 大小 scale sx,sy 水平和垂直的缩放因子 rotate angle 旋转的量,用弧度表示.正值表示顺时针方向旋转,负值表示逆时针方向旋转. setTransform…

AxeSlide软件项目梳理   canvas绘图系列知识点整理 html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: 1)drawImage(image,x,y):在canvas中(x,y)处绘制图片. 2)drawImage(image,x,y,width,height):在canvas中(x,y)处绘制图片,并将其缩放到指定的宽度和高度. 3)drawImage(image,sourceX…

AxeSlide软件项目梳理   canvas绘图系列知识点整理 grid类的实现 当鼠标在画布上缩放时,网格能跟着我的鼠标滚动而相应的有放大缩小的效果. 下面是具体实现的代码,draw函数里计算出大网格每条线的间隔和小网格线的间隔,以及大网格和小网格绘制所用的颜色. 具体的实现算法也是参照另外一个软件用到的,但是我们改进了很多,例如控制只将当前画面显示出来的线条绘制出来 draw() { var scale = (editor && editor.canvas && ed…

AxeSlide软件项目梳理   canvas绘图系列知识点整理 我们创建一个类封装了所有鼠标需要处理的事件. export class MouseEventInfo { el: HTMLElement; onmouseDown: Function; ondragMove: Function; ondragUp: Function; onmouseMove: Function; onmouseUp: Function; mouseWheel: Function; onContextMenu: F…

AxeSlide软件项目梳理   canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比较合适的库. 下图中所有的图形都是我们自己写代码在canvas上绘制方法出来的,可以改变实心/空心,改变颜色,大小宽高,线条弯曲度,透明度等. 父类shape类 实现的代码如下:所有的图形均继承自shape类,而shape类继承自CommonElement,shape中的所有图形添加到画布上都是一个…

AxeSlide软件项目梳理   canvas绘图系列知识点整理 Tween算法及缓动效果 软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇<AxeSlide软件项目梳理>中的作品展示动画. 实例效果:   Tween类型: Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Elastic Back Bounce ease类型: easeIn…

AxeSlide软件项目梳理   canvas绘图系列知识点整理 软件参考d3的知识点 我们在软件中主要用到d3.js的核心函数d3.interpolateZoom - 在两个点之间平滑地缩放平移.请查看示例,效果如下平滑的缩放平移. 实现该效果使用d3的js代码 var width = 960, height = 500, radius = 10; var p0 = [250, 200, 60], p1 = [560, 300, 120]; var svg = d3.select("body&…

AxeSlide软件项目梳理   canvas绘图系列知识点整理 背景介绍 我们的软件支持插入gif图片,并且展示在软件里是动态的,例如插入下面这张gif图. 在软件里显示的同样是这样的动态效果: 那么这张动态的图是怎么绘制到canvas上面的呢,如果只是像绘制一张普通图片用context.drawImage(img,x,y),这样绘制出来的只是当前显示到img标签的一个静态画面. 下面介绍我们项目中使用的方法: 1. 解析gif文件信息 安装Node.js的gify-parse模块,该模块用于…