图片在 canvas 中的 选中/平移/缩放/旋转，包含了所有canvas的2D变化，让你认识到数学的重要性...

1、介绍

 

　　canvas 已经出来好久了，相信大家多少都有接触。

　　如果你是前端页面开发/移动开发，那么你肯定会有做过图片上传处理，图片优化，以及图片合成，这些都是可以用 canvas 实现的。

　　如果你是做前端游戏开发的，可能会非常熟悉，或者说对几何和各种图形变化非常了解。

　　这里我介绍的是简单的、基本的，但是非常完全的一个 2d 的 canvas 案例。

　　基本上了解了这些，所有的 canvas 中的 2d 变化基本都可以会了。

 

　　先来一个截图看看效果：

 

 

　　如上面所看，可以总结出几个功能点：

 

　　　　1、添加多张图片或者文字到 canvas 。( 这里没有添加文字，我们可以先把文字利用canvas转为图片，然后添加 canvas 上 )

　　　　2、图片的缩放，根据选择不同的点实现不同缩放

　　　　3、图片移动，改变图片在 canvas 的中心位置

　　　　4、图片旋转，根据旋转点在移动的角度进行旋转

　　　　5、图片选择，两种方式：一种根据图片的位置，确定当前选择的图形，第二种是点击列表选择

　　　　6、数据的保存，提供了保存按钮，保存图形的位置和大小以及旋转角度

　　　　7、初始化数据，通过之前保存的数据，重新绘制。

 

 

　　代码案例介绍： 

　　　　html 代码：

　　

<canvas height="960" width="960" style="width: 100%;" id="test"></canvas>
<div id="list"></div>
<button id="save">保存</button>

　　

　　js代码是模块形式开发的，并且传到 npm 上面，可以自行下载并且有源码：

 

yarn add xl_canvas

　　

　　代码调用和实现：

import Canvas from 'xl_cnavas';

 const dataCa =   sessionStorage.getItem('test_tst_111');
    const canvas = new Canvas({
        canvas: 'test',
        target: 'test',
        list: 'list',
        height: 960,
        width: 960,
        data: dataCa?JSON.parse(dataCa):[],
    });
    document.getElementById('save').addEventListener('click', () => {
        sessionStorage.setItem('test_tst_111',
            JSON.stringify(canvas.save()));
    });

    // canvas.addPhoto('https://cdn.eoniq.co/spree/images/283205/desktop/CI-26-LS_b6bb28a3914ae9caa651abbddb548054.jpg?1533196945');
    // canvas.addPhoto('http://www.runoob.com/wp-content/uploads/2013/11/img_the_scream.jpg');

　　

　　npm 包没有测试，本地的可以实现各种方法了。如有问题可以留言。。

 

2、项目开发

　　

　　知识梳理：

 

　　在开发中我们需要很多关于平面几何的知识来处理我们的操作，例如：

　　

　　　　1、确定某个点是否在矩形内   ： 用于确定点击时候选中的图形

　　　　2、计算向量的角度 ： 用于处理旋转

　　　　3、计算某个向量在另一个向量上面的距离 ： 用于旋转之后，的移动距离计算

　　　　4、某点绕道某点旋转一定角度的点 ： 用于确定旋转后的点的位置

　　　　

　　是不是脑子里浮现了很多高中初中的数学几何公式。

　　如果没有，百度下吧，都是很多有意思的公式，让自己重温下高中数学，回忆一下高中。

　　证明一下自己学过高中数学。

　　

　　

　　代码设计/简要开发介绍：

　　

　　以下如果需要查看，最好下载源码对照的查看

　　如何开始这个功能的开发呢？

　　

　　1、首先创建一个 Canvas  类

 

constructor(options) {
        this.options = options;
        const {
            canvas,