背景：
须要应用 Canvas 实现增加图片、文字、摄像头画面，并且反对拖拽、缩放、旋转等性能。
但成熟 Canvas 库（比方 Sprite.js Fabric.js ）个别都比拟宏大（300kb+），所以本人实现精简版本，缩小体积。

零

基本功能：

  • 拖拽挪动元素
  • 缩放元素（变形、等比例缩放）
  • 旋转元素
  • 元素内容能够是：图片、文字、摄像头

画布中的元素（也可称为Sprite），每个元素的的地位信息由 IRect 形容，交互可体验Fabric.js。

interface IRect {  x: number;  y: number;  w: number;  h: number;}class Sprite {  // 地位，尺寸数据  rect: IRect  // 旋转角度  angle: number}

canvas绘制元素

因为需绘制元素（图片、文字、视频）占用的地位都可用矩形示意，所以能够：

// 将 canvas 坐标系原点挪动到 rect 中心点ctx.setTransform(1, 0, 0, 1, x + w / 2, y + h / 2)// 这样任意 rect 的绘制参数都是一样的ctx.drwaImage(img, -w / 2, -h / 2, w, h)// 围绕中心点旋转ctx.rotate(angle)

挪动元素

这一步非常简单，跟拖拽dom元素一样。

// 1. 监听mousemove事件，由鼠标地位减去初始地位，能够失去挪动的坐标差值。  // startX startY 是鼠标按下时的地位incX = offsetX - startXincY = offsetY - startY// 2. 将挪动间隔映射为 Canvas 坐标系中的间隔（因为 Canvas clientWith 跟 width 很可能不一样）。  incX = incX / (canvas.clientWith / canvas.width) // incY 同理// 3. 将新的坐标设置到元素的地位上。sprite.setRect({ x: x + incX, y: y + incY })

翻转元素

个别通过右键菜单来触发翻转成果，接管到事件后抉择以下某个办法

两个办法

  1. 可通过 ctx.setTransform 实现。（倡议，据说性能好些，不须要 ctx.save ctx.restore）

    // https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setTransform// 程度翻转ctx.setTransform(-1, 0, 0, 1, 0, 0)// 垂直翻转ctx.setTransform(1, 0, 0, -1, 0, 0)

  2. 可通过 ctx.scale 实现。

    // https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/scale// 程度翻转ctx.scale(-1, 1)// 垂直翻转ctx.scale(1, -1)

旋转元素

  1. 获取旋转的中心点，通过 rect 计算失去。{ x: x + w / 2, y: y + h / 2 }

  2. 监听mousemove事件，获取鼠标坐标，由鼠标坐标失去旋转角度angle = Math.atan2(y, x)。

    function rotateSprite ( centerPos, onChange) {  const onMove = ({ clientX, clientY }: MouseEvent): void => { // 映射为 绝对中心点的坐标 const x = clientX - centerPos.x const y = clientY - centerPos.y // 旋转控制点在正上方，绝对 x 轴是 -90°， 所以须要加上 Math.PI / 2 const angle = Math.atan2(y, x) + Math.PI / 2 onChange(angle)  }  const clear = (): void => { window.removeEventListener('mousemove', onMove) window.removeEventListener('mouseup', clear)  }  window.addEventListener('mousemove', onMove)  window.addEventListener('mouseup', clear)}

缩放元素

自身rect缩放非常简单，加上旋转后，缩放成果就简单了很多。
比方：

  1. 拖拽rect右侧的控制点，只能扭转矩形的宽度，在旋转状况下，rect左侧的边是放弃不动的。
  2. 拖拽 rect 右下角的控制点，同时扭转宽高，但须要地位等比，rect 左上角的点放弃不动。

所以这个题能够形象为

  1. 给出的参数：rect（坐标、宽高）数据，旋转角度、鼠标坐标。
  2. 须要解出的答案：新的IRect（坐标、宽高）。

解题步骤

以拖拽右下角控制点（RB）为例，因为是等比缩放，所以中心点会始终处于对角线（LT-RB）上。

  1. 监听 mousemove 事件，获取鼠标坐标，减去中心点坐标，失去绝对于中心点的坐标。
  2. 依据坐标O、元素旋转角度、IRect，可计算出 RB 被 挪动的长度。

  3. 挪动长度乘以对应的三角函数，即为减少的宽、高。

    // 对角线角度（LB-RT对角线，角度是正数，须要乘以-1）const diagonalAngle = Math.atan2(rect.h, rect.w)// 坐标系旋转角度， lb->rt的对角线的初始角度为正数，所以须要乘以-1const rotateAngle = diagonalAngle + angle// startPos 及 RB 的坐标（拖拽起始地位），ClientXY 是mousemove事件中获取的坐标const ox = clientX - startPos.xconst oy = clientY - startPos.y// 坐标系旋转变动公式，让x轴与【对角线重合】，鼠标地位的x值即为减少的长度（RB’位于鼠标与对角线的垂直交点）const incS = ox * Math.cos(rotateAngle) + oy * Math.sin(rotateAngle)// 等比例缩放，减少宽低等于长度乘以对应的角度函数// 因为等比例缩放，核心及被拖拽的点，肯定在对角线上const incW = incS * Math.cos(diagonalAngle)const incH = incS * Math.sin(diagonalAngle)// 新中心点坐标, 原核心坐标 (x + w / 2, y + h / 2)const newCntX = incS / 2 * Math.cos(rotateAngle) + x + w / 2const newCntY = incS / 2 * Math.sin(rotateAngle) + y + h / 2// rect 新坐标const newX = newCntX - newW / 2const newY = newCntY - newH / 2// 新的rect: { x: newX, y: newY, w: newW, h: newH }

    下面代码用到了坐标系旋转变动公式，其推导如下图所示：

其余缩放场景注意事项

  1. 右边三个点的缩放，坐标值变小（正数），也是在放大，所以计算出来值要乘以-1。
  2. 利用好坐标系旋转变动公式，拖拽某些点时，留神其角度与默认 X 轴之间的差值。

判断鼠标是否点击了元素

  1. 将鼠标坐标，rect xy 值转换为绝对于中心点的坐标
  2. 再求出鼠标坐标旋转 rect 角度后的坐标（坐标系旋转公式）

  3. 判断鼠标点击的坐标是否超出 rect 边界

    // pos 鼠标坐标， rect center 中心点// 鼠标点击坐标映射成 canvas坐标, 而后转换为以中点为原点的坐标const cvsOX = pos.x / ratio.w - center.xconst cvsOY = pos.y / ratio.h - center.y// 如果有旋转，映射成绝对原点，旋转前的坐标let mx = cvsOXlet my = cvsOYlet { x, y, w, h } = rect// 映射成中心点坐标x = x - center.xy = y - center.y// 坐标系旋转变动公式 mx = cvsOX * Math.cos(angle) + cvsOY * Math.sin(angle)my = cvsOY * Math.cos(angle) - cvsOX * Math.sin(angle)if (mx < x || mx > x + w || my < y || my > y + h) return falsereturn true