canvas封装变换任意图形的组件

前言

学习目标

• 根据任意图形的变换原理，修改之前变换图案的代码，使其可以变换任意图形

知识点

• 矩阵变换

1-Object2D

整体代码如下：

import { Vector2 } from '../math/Vector2'
import { Group } from './Group'
import { Scene } from '../core/Scene'
import { EventDispatcher } from '../core/EventDispatcher'
import { Matrix3 } from '../math/Matrix3'
import { generateUUID } from '../math/MathUtils.js'
export type Object2DType = {
position?: Vector2
rotate?: number
scale?: Vector2
offset?: Vector2
boundingBox?: BoundingBox
visible?: boolean
index?: number
name?: string
parent?: Scene | Group | undefined
enableCamera?: boolean
uuid?: string
[key: string]: any
}
type BoundingBox = {
min: Vector2
max: Vector2
}
const pi2 = Math.PI * 2
class Object2D extends EventDispatcher {
// 自定义属性
[key: string]: any
// 位置
position = new Vector2()
// 旋转
rotate = 0
// 缩放
scale = new Vector2(1, 1)
// 偏移
offset = new Vector2()
// 边界盒子
boundingBox: BoundingBox = {
min: new Vector2(),
max: new Vector2(),
}
// 可见性
visible = true
// 渲染顺序
index = 0
// 名称
name = ''
// 父级
parent: Scene | Group | undefined
// 是否受相机影响-只适用于Scene的children元素
enableCamera = true
// UUID
uuid = generateUUID()
// 类型
readonly isObject2D = true
/* 本地模型矩阵 */
get matrix(): Matrix3 {
const { position, rotate, scale } = this
return new Matrix3()
.scale(scale.x, scale.y)
.rotate(rotate)
.translate(position.x, position.y)
}
/* 世界模型矩阵 */
get worldMatrix(): Matrix3 {
const { parent, matrix } = this
if (parent) {
return parent.worldMatrix.multiply(matrix)
} else {
return matrix
}
}
/* pvm 投影视图模型矩阵 */
get pvmMatrix(): Matrix3 {
const scene = this.getScene()
if (scene) {
const { camera } = scene
return new Matrix3().multiplyMatrices(camera.pvMatrix, this.worldMatrix)
} else {
return this.worldMatrix
}
}
/* 总缩放量 */
get worldScale(): Vector2 {
const { scale, parent } = this
if (parent) {
return scale.clone().multiply(parent.worldScale)
} else {
return scale
}
}
/* 先变换(缩放+旋转)后位移 */
transform(ctx: CanvasRenderingContext2D) {
const { position, rotate, scale } = this
ctx.translate(position.x, position.y)
ctx.rotate(rotate)
ctx.scale(scale.x, scale.y)
}
/* 将矩阵分解到当期对象的position, rotate, scale中 */
decomposeModelMatrix(m: Matrix3) {
const e = [...m.elements]
// 位移量
this.position.set(e[6], e[7])
// 缩放量
let sx = new Vector2(e[0], e[1]).length()
const sy = new Vector2(e[3], e[4]).length()
const det = m.determinant()
if (det < 0) {
sx = -sx
}
this.scale.set(sx, sy)
// 旋转量
let ang = Math.atan2(e[1] / sx, e[0] / sx)
if (ang < 0) {
ang += pi2
}
this.rotate = ang
}
/* 从父级中删除自身 */
remove() {
const { parent } = this
parent && parent.remove(this)
}
/* 获取场景 */
getScene(): Scene | null {
if ('isScene' in this) {
return this as unknown as Scene
} else if (this.parent) {
return this.parent.getScene()
} else {
return null
}
}
/* 绘图 */
draw(ctx: CanvasRenderingContext2D) {
if (!this.visible) {
return
}
ctx.save()
/*  矩阵变换 */
this.transform(ctx)
/* 绘制图形 */
this.drawShape(ctx)
ctx.restore()
}
/* 绘制图形-接口 */
drawShape(ctx: CanvasRenderingContext2D) {}
/* 创建路径-接口 */
crtPath(ctx: CanvasRenderingContext2D, projectionMatrix: Matrix3) {}
/* 计算边界盒子 */
computeBoundingBox() {}
}
export { Object2D }

在Object2D对象中添加了以下属性：

• offset 图形偏移量

• boundingBox 边界盒子

  • min 盒子极小值
  • max 盒子极大值

在Object2D对象中添加了以下方法：

• computeBoundingBox() 计算边界盒子，此方法会在具体的图形类中实现。

2-Img2D

将之前的Img对象更名为Img2D，避免与Image对象发音冲突。

整体代码如下：

import { Vector2 } from '../math/Vector2'
import { BasicStyle, BasicStyleType } from '../style/BasicStyle'
import { Object2D, Object2DType } from './Object2D'
import { crtPathByMatrix } from './ObjectUtils'
type ImgType = Object2DType & {
image?: CanvasImageSource
size?: Vector2
offset?: Vector2
view?: View | undefined
src?: string
style?: BasicStyleType
}
type View = {
x: number
y: number
width: number
height: number
}
class Img2D extends Object2D {
image: CanvasImageSource = new Image()
size = new Vector2(300, 150)
offset = new Vector2()
view: View | undefined
style: BasicStyle = new BasicStyle()
// 类型
readonly isImg = true
constructor(attr: ImgType = {}) {
super()
this.setOption(attr)
}
/* 属性设置 */
setOption(attr: ImgType) {
for (let [key, val] of Object.entries(attr)) {
switch (key) {
case 'src':
if (this.image instanceof Image) {
this.image.src = val
}
break
case 'style':
this.style.setOption(val)
break
default:
this[key] = val
}
}
}
/* 绘图 */
drawShape(ctx: CanvasRenderingContext2D) {
const { image, size, offset, view, style } = this
//样式
style.apply(ctx)
// 绘制图像
if (view) {
ctx.drawImage(
image,
view.x,
view.y,
view.width,
view.height,
offset.x,
offset.y,
size.x,
size.y
)
} else {
ctx.drawImage(image, offset.x, offset.y, size.x, size.y)
}
}
/* 绘制图像边界 */
crtPath(ctx: CanvasRenderingContext2D, matrix = this.pvmMatrix) {
const {
boundingBox: {
min: { x: x0, y: y0 },
max: { x: x1, y: y1 },
},
} = this
this.computeBoundingBox()
crtPathByMatrix(ctx, [x0, y0, x1, y0, x1, y1, x0, y1], matrix)
}
/* 计算边界盒子 */
computeBoundingBox() {
const {
boundingBox: { min, max },
size,
offset,
} = this
min.copy(offset)
max.addVectors(offset, size)
}
}
export { Img2D }

在上面的代码中删掉了之前与偏移矩阵相关的moMatrix、pvmoMatrix矩阵，在后面我们会把offset偏移相关的数据直接塌陷到路径、边界和控制框的绘制中。

在computeBoundingBox()方法中，基于offset和size计算的边界盒子。

在crtPath()方法中，基于边界盒子boundingBox绘制路径。

3-ControlFrame

将之前的Frame对象更名为ControlFrame，这样更严谨一些。

整体代码如下：

import { Matrix3 } from '../math/Matrix3'
import { Vector2 } from '../math/Vector2'
import { Object2D } from '../objects/Object2D'
import { crtPath, crtPathByMatrix } from '../objects/ObjectUtils'
export type State = 'scale' | 'scaleX' | 'scaleY' | 'rotate' | 'move' | null
type Leve = 'worldMatrix' | 'pvmMatrix'
type ControlFrameType = {
obj?: Object2D
level?: Leve
}
const pi2 = Math.PI * 2
let _bool: Boolean = false
//* 虚拟上下文对象 */
const ctx = document
.createElement('canvas')
.getContext('2d') as CanvasRenderingContext2D
class ControlFrame {
// 目标对象
_obj = new Object2D()
// 图案本地坐标系内的边框的顶点集合
localVertices: number[] = []
// 图案裁剪坐标系的边框的顶点集合
clipVertives: number[] = []
// 当前节点索引
nodeIndex = 0
// 本地坐标系中的中点
localCenter = new Vector2()
// 裁剪坐标系中的中点
clipCenter = new Vector2()
// 路径变换矩阵
matrix = new Matrix3()
// 要把路径变换到哪个坐标系中，默认裁剪坐标系
level: Leve = 'pvmMatrix'
// 描边色
strokeStyle = '#558ef0'
// 填充色
fillStyle = '#fff'
constructor(attr: ControlFrameType = {}) {
for (let [key, val] of Object.entries(attr)) {
this[key] = val
}
}
get obj() {
return this._obj
}
set obj(val) {
this._obj = val
val.computeBoundingBox()
this.updateVertives()
}
/* 获取对面节点 */
get localOpposite(): Vector2 {
return this.getOpposite('localVertices')
}
get clipOpposite(): Vector2 {
return this.getOpposite('clipVertives')
}
getOpposite(type: 'localVertices' | 'clipVertives') {
const { nodeIndex } = this
const vertices = this[type]
const ind = (nodeIndex + 8) % 16
return new Vector2(vertices[ind], vertices[ind + 1])
}
/* 更新localVertices和clipVertives*/
updateVertives() {
const {
clipVertives: cv,
localCenter,
clipCenter,
obj,
level,
obj: {
boundingBox: {
min: { x: x0, y: y0 },
max: { x: x1, y: y1 },
},
},
} = this
const xm = (x0 + x1) / 2
const ym = (y0 + y1) / 2
this.localVertices = [
x0,y0,xm,y0,x1,y0,x1,ym,x1,y1,xm,y1,x0,y1,x0,ym,
]
const lv = this.localVertices
this.matrix = obj[level]
for (let i = 0, len = lv.length; i < len; i += 2) {
const { x, y } = new Vector2(lv[i], lv[i + 1]).applyMatrix3(this.matrix)
cv[i] = x
cv[i + 1] = y
}
localCenter.copy(
new Vector2(lv[0], lv[1]).lerp(new Vector2(lv[8], lv[9]), 0.5)
)
clipCenter.copy(
new Vector2(cv[0], cv[1]).lerp(new Vector2(cv[8], cv[9]), 0.5)
)
}
draw(ctx: CanvasRenderingContext2D) {
this.updateVertives()
const {
obj: {
size,
offset: { x: ox, y: oy },
},
clipVertives: fv,
clipCenter,
matrix,
strokeStyle,
fillStyle,
} = this
/* 图案尺寸的一半 */
const [halfWidth, halfheight] = [size.width / 2, size.height / 2]
/* 绘图 */
ctx.save()
ctx.strokeStyle = strokeStyle
ctx.fillStyle = fillStyle
/* 矩形框 */
ctx.beginPath()
crtPath(ctx, [fv[0], fv[1], fv[4], fv[5], fv[8], fv[9], fv[12], fv[13]])
ctx.closePath()
ctx.stroke()
/* 矩形节点 */
const { elements: e } = matrix
// 矩阵内的缩放量
const sx = new Vector2(e[0], e[1]).length()
const sy = new Vector2(e[3], e[4]).length()
// 节点尺寸，消去缩放量
const pointSize = new Vector2(8 / sx, 8 / sy)
const [w, h] = [pointSize.x / 2, pointSize.y / 2]
// 绘制节点
ctx.beginPath()
for (let y = 0; y < 3; y++) {
for (let x = 0; x < 3; x++) {
if (y === 1 && x === 1) {
continue
}
const [bx, by] = [halfWidth * x, halfheight * y]
crtPathByMatrix(
ctx,
[
ox + bx - w,
oy + by - h,
ox + bx + w,
oy + by - h,
ox + bx + w,
oy + by + h,
ox + bx - w,
oy + by + h,
],
matrix,
true
)
}
}
ctx.fill()
ctx.stroke()
/* 中点 */
ctx.beginPath()
ctx.arc(clipCenter.x, clipCenter.y, 5, 0, pi2)
ctx.fill()
ctx.stroke()
ctx.restore()
}
/* 获取变换状态 */
getMouseState(mp: Vector2): State {
const { clipVertives: fv } = this
/* 对角线距离 */
const diagonal = new Vector2(fv[0] - fv[8], fv[1] - fv[9]).length()
/* 判断缩放的距离 */
const scaleDist = Math.min(24, diagonal / 3)
/* x,y缩放 */
for (let i = 0, len = fv.length; i < len; i += 4) {
if (new Vector2(fv[i], fv[i + 1]).sub(mp).length() < scaleDist) {
this.nodeIndex = i
return 'scale'
}
}
/* y向缩放 */
ctx.save()
ctx.lineWidth = scaleDist
ctx.beginPath()
crtPath(ctx, [fv[0], fv[1], fv[4], fv[5]])
_bool = ctx.isPointInStroke(mp.x, mp.y)
ctx.restore()
if (_bool) {
this.nodeIndex = 2
return 'scaleY'
}
ctx.save()
ctx.lineWidth = scaleDist
ctx.beginPath()
crtPath(ctx, [fv[8], fv[9], fv[12], fv[13]])
_bool = ctx.isPointInStroke(mp.x, mp.y)
ctx.restore()
if (_bool) {
this.nodeIndex = 10
return 'scaleY'
}
/* x向缩放 */
ctx.save()
ctx.lineWidth = scaleDist
ctx.beginPath()
crtPath(ctx, [fv[12], fv[13], fv[0], fv[1]])
_bool = ctx.isPointInStroke(mp.x, mp.y)
ctx.restore()
if (_bool) {
this.nodeIndex = 14
return 'scaleX'
}
ctx.save()
ctx.lineWidth = scaleDist
ctx.beginPath()
crtPath(ctx, [fv[4], fv[5], fv[8], fv[9]])
_bool = ctx.isPointInStroke(mp.x, mp.y)
ctx.restore()
if (_bool) {
this.nodeIndex = 6
return 'scaleX'
}
/* 移动 */
ctx.beginPath()
crtPath(ctx, fv)
if (ctx.isPointInPath(mp.x, mp.y)) {
return 'move'
}
/* 旋转 */
ctx.save()
ctx.lineWidth = 80
ctx.beginPath()
crtPath(ctx, fv, true)
_bool = ctx.isPointInStroke(mp.x, mp.y)
ctx.restore()
if (_bool) {
return 'rotate'
}
/* 无状态 */
return null
}
}
export { ControlFrame }

ControlFrame对象的属性做了以下调整：

• obj：原本的img属性，可以为所有的Object2D图形绘制控制框。
• level：要把路径变换到哪个坐标系中，可以取值’pvmMatrix’或’worldMatrix’，其中已经没有了偏移矩阵，这是因为偏移矩阵已经塌陷到了路径的绘制方法里，因此在把路径变换到某个坐标系中时，已经不需要偏移矩阵。
• localVertices：图案本地坐标系内的边框的顶点集合，便于相应顶点的获取。
• clipVertives：图案裁剪坐标系内的边框的顶点集合，便于相应顶点的获取。
• localCenter：图形在本地坐标系中的中点。
• clipCenter：图形在裁剪坐标系中的中点。
• nodeIndex：当前节点索引
• localOpposite：本地坐标系内的对点
• clipOpposite：裁剪坐标系内的对点

localVertices,clipVertives,localCenter,clipCenter会通过updateVertives() 方法进行更新，updateVertives()方法会在每次绘图时执行。

nodeIndex会在getMouseState()方法中获取获取鼠标状态时同步更新，nodeIndex会作为通过get 取值器获取localOpposite,clipOpposite的依据。

在draw()方法中绘制边界时，便是基于boundingBox绘制的，其offset偏移值已经算入其中。

4-Object2DTransformer

Object2DTransformer是之前的ImgTransformer，表示对任意Object2D对象的变换。

其整体代码如下：

import { Matrix3 } from '../math/Matrix3'
import { Vector2 } from '../math/Vector2'
import { Object2D } from '../objects/Object2D'
class Object2DTransformer {
/* 本地变换数据 */
localMatrix = new Matrix3()
localRotate = 0
localScale = new Vector2(1, 1)
localPosition = new Vector2()
/* 本地坐标系内的变换基点 */
origin = new Vector2()
/* 相对变换量 */
relativePosition = new Vector2()
relativeRotate = 0
relativeScale = new Vector2(1, 1)
/* 等量旋转时的旋转弧度 */
uniformRotateAng = Math.PI / 12
/* 基点变换后的矩阵 */
get matrix() {
const {
relativePosition,
relativeRotate,
relativeScale,
origin,
localPosition,
localScale,
localRotate,
} = this
const m2 = new Matrix3().makeTranslation(-origin.x, -origin.y)
const m3 = new Matrix3()
.scale(localScale.x * relativeScale.x, localScale.y * relativeScale.y)
.rotate(localRotate + relativeRotate)
.translate(
localPosition.x + relativePosition.x,
localPosition.y + relativePosition.y
)
return m3.clone().multiply(m2)
}
/* 设置基点 */
setOrigin(localOrigin: Vector2) {
this.origin.copy(localOrigin)
this.localPosition.copy(localOrigin.clone().applyMatrix3(this.localMatrix))
}
/* 根据Object2D对象获取本地矩阵数据 */
setLocalMatrixDataByObject2D(obj: Object2D) {
this.localMatrix.copy(obj.matrix)
this.localScale.copy(obj.scale)
this.localRotate = obj.rotate
this.localPosition.copy(obj.position)
}
/* 清理相对数据 */
clearRelativeMatrixData() {
this.relativePosition.set(0, 0)
this.relativeRotate = 0
this.relativeScale.set(1, 1)
}
/* 获取相对缩放量 */
getRelativeScale(start2Orign: Vector2, end2Orign: Vector2) {
const a = end2Orign.clone().rotate(-this.localRotate)
const b = start2Orign.clone().rotate(-this.localRotate)
return new Vector2(a.x / b.x, a.y / b.y)
}
/* 双向自由缩放 */
scale0(start2Orign: Vector2, end2Orign: Vector2) {
this.relativeScale.copy(this.getRelativeScale(start2Orign, end2Orign))
}
/* 双向等比缩放 */
scale1(start2Orign: Vector2, end2Orign: Vector2) {
const { x, y } = this.getRelativeScale(start2Orign, end2Orign)
this.relativeScale.set((x + y) / 2)
}
/* 单向自由缩放 */
scaleX0(start2Orign: Vector2, end2Orign: Vector2) {
this.doScaleSigleDir('x', start2Orign, end2Orign)
}
scaleY0(start2Orign: Vector2, end2Orign: Vector2) {
this.doScaleSigleDir('y', start2Orign, end2Orign)
}
doScaleSigleDir(dir: 'x' | 'y', start2Orign: Vector2, end2Orign: Vector2) {
const s = this.getRelativeScale(start2Orign, end2Orign)
this.relativeScale[dir] = s[dir]
}
/* 单向等比缩放 */
scaleX1(start2Orign: Vector2, end2Orign: Vector2) {
this.doUniformScaleSigleDir('x', start2Orign, end2Orign)
}
scaleY1(start2Orign: Vector2, end2Orign: Vector2) {
this.doUniformScaleSigleDir('y', start2Orign, end2Orign)
}
doUniformScaleSigleDir(
dir: 'x' | 'y',
start2Orign: Vector2,
end2Orign: Vector2
) {
const s = this.getRelativeScale(start2Orign, end2Orign)
this.relativeScale.set(s[dir])
}
/* 自由旋转 */
rotate0(start2Orign: Vector2, end2Orign: Vector2) {
this.relativeRotate = end2Orign.angle() - start2Orign.angle()
}
/* 等量旋转 */
rotate1(start2Orign: Vector2, end2Orign: Vector2) {
const { uniformRotateAng } = this
const ang = end2Orign.angle() - start2Orign.angle()
this.relativeRotate =
Math.floor((ang + uniformRotateAng / 2) / uniformRotateAng) *
uniformRotateAng
}
/* 自由移动 */
move0(dragStart: Vector2, dragEnd: Vector2) {
this.relativePosition.subVectors(dragEnd, dragStart)
}
/* 正交移动 */
move1(dragStart: Vector2, dragEnd: Vector2) {
// 作业
}
}
export { Object2DTransformer }

Object2DTransformer对象是基于上一章的任意图形的变换建立的，其中的本地变换数据、本地坐标系内的变换基点和相对变换量都是与上一章相吻合的。

Object2DTransformer对象会通过matrix取值器返回图形最新的本地模型矩阵。

/* 基点变换后的矩阵 */
get matrix() {
const {
relativePosition,
relativeRotate,
relativeScale,
origin,
localPosition,
localScale,
localRotate,
} = this
const m2 = new Matrix3().makeTranslation(-origin.x, -origin.y)
const m3 = new Matrix3()
.scale(localScale.x * relativeScale.x, localScale.y * relativeScale.y)
.rotate(localRotate + relativeRotate)
.translate(
localPosition.x + relativePosition.x,
localPosition.y + relativePosition.y
)
return m3.clone().multiply(m2)
}

在变换之前，setLocalMatrixDataByObject2D(obj: Object2D)方法会从图形中获取本地模型矩阵数据。

setLocalMatrixDataByObject2D(obj: Object2D) {
this.localMatrix.copy(obj.matrix)
this.localScale.copy(obj.scale)
this.localRotate = obj.rotate
this.localPosition.copy(obj.position)
}

setOrigin(localOrigin: Vector2)方法可以设置变换基点，并将当前图形的本地模型矩阵乘以origin，算出最新的本地模型矩阵的位移量localPosition。

setOrigin(localOrigin: Vector2) {
this.origin.copy(localOrigin)
this.localPosition.copy(localOrigin.clone().applyMatrix3(this.localMatrix))
}

在变换图形的时候，scale0(),scale1(),rotate0(),rotate1(),move0()等方法会根据鼠标数据，计算相对变换量。

5-TransformControler

TransformControler对象是之前的ImgControler，表示对任意图形的变换控制。

其整体代码如下：

import { Vector2 } from '../math/Vector2'
import { Object2D } from '../objects/Object2D'
import { Matrix3 } from '../math/Matrix3'
import { MouseShape } from './MouseShape'
import { ControlFrame, State } from './ControlFrame'
import { Object2DTransformer } from './Object2DTransformer'
type TranformData = {
position: Vector2
rotate: number
scale: Vector2
}
// change 事件
const _changeEvent = { type: 'change' }
class TransformControler extends Object2D {
// 要控制的Object2D对象
_obj: Object2D | null = null
// 图案控制框
frame = new ControlFrame()
// 鼠标状态
mouseState: State = null
// 鼠标的裁剪坐标位
clipMousePos = new Vector2()
// 鼠标图案
mouseShape = new MouseShape({
vertives: this.frame.clipVertives,
center: this.frame.clipCenter,
mousePos: this.clipMousePos,
})
// 渲染顺序
index = Infinity
// 不受相机影响
enableCamera = false
// 控制状态
controlState: State = null
// 拖拽起始位与结束位
dragStart = new Vector2()
dragEnd = new Vector2()
//拖拽起始位减基点
start2Orign = new Vector2()
//拖拽结束位减基点
end2Orign = new Vector2()
// alt 键是否按下
_altKey = false
// shift 键是否按下
shiftKey = false
/* 变换器 */
transformer = new Object2DTransformer()
// 父级pvm逆矩阵
parentPvmInvert = new Matrix3()
// 选中图案时的暂存数据，用于取消变换
controlStage: TranformData = {
position: new Vector2(),
scale: new Vector2(1, 1),
rotate: 0,
}
get obj() {
return this._obj
}
set obj(val) {
if (this._obj === val) {
return
}
this._obj = val
if (val) {
this.frame.obj = val
this.saveTransformData()
this.transformer.setLocalMatrixDataByObject2D(val)
this.dispatchEvent({ type: 'selected', obj: val })
} else {
this.mouseState = null
this.controlState = null
}
this.dispatchEvent(_changeEvent)
}
get altKey() {
return this._altKey
}
set altKey(val) {
if (this._altKey === val) {
return
}
this._altKey = val
const { controlState } = this
if (controlState) {
// 清理相对变换
this.transformer.clearRelativeMatrixData()
// 重置基点
this.setOrigin()
// 设置起点到基点向量
this.start2Orign.subVectors(
this.dragStart,
this.transformer.localPosition
)
// 终点到基点的向量
this.end2Orign.subVectors(this.dragEnd, this.transformer.localPosition)
// 重新变换
this.relativeTransform(controlState)
}
this.dispatchEvent(_changeEvent)
}
/* 鼠标按下 */
pointerdown(obj: Object2D | null, mp: Vector2) {
if (!this.mouseState) {
this.obj = obj
if (!obj) {
return
}
}
// 更新鼠标裁剪坐标位
this.clipMousePos.copy(mp)
// 获取鼠标状态
this.mouseState = this.frame.getMouseState(mp)
// 更新parentPvmInvert
const pvmInvert = this.obj?.parent?.pvmMatrix.invert()
pvmInvert && this.parentPvmInvert.copy(pvmInvert)
if (this.mouseState) {
// 拖拽起始位(图案父级坐标系)
this.dragStart.copy(mp.clone().applyMatrix3(this.parentPvmInvert))
// 控制状态等于鼠标状态
this.controlState = this.mouseState
// 设置本地矩阵数据
this.obj && this.transformer.setLocalMatrixDataByObject2D(this.obj)
// 设置基点
this.setOrigin()
// 设置起点到基点向量
this.start2Orign.subVectors(
this.dragStart,
this.transformer.localPosition
)
}
this.dispatchEvent(_changeEvent)
}
/* 鼠标移动 */
pointermove(mp: Vector2) {
if (!this.obj) {
return
}
const {
end2Orign,
dragEnd,
clipMousePos,
controlState,
frame,
transformer: { localPosition },
} = this
// 更新鼠标裁剪坐标位
clipMousePos.copy(mp)
if (controlState) {
dragEnd.copy(mp.clone().applyMatrix3(this.parentPvmInvert))
end2Orign.subVectors(dragEnd, localPosition)
this.relativeTransform(controlState)
} else {
// 获取鼠标状态
this.mouseState = frame.getMouseState(mp)
}
this.dispatchEvent(_changeEvent)
}
/* 鼠标抬起 */
pointerup() {
const { obj, controlState, transformer } = this
if (!obj || !controlState) {
return
}
transformer.setLocalMatrixDataByObject2D(obj)
transformer.clearRelativeMatrixData()
this.controlState = null
this.dispatchEvent(_changeEvent)
}
/* 键盘按下 */
keydown(key: string, altKey: boolean, shiftKey: boolean) {
this.shiftKey = shiftKey
this.altKey = altKey
if (this.obj) {
switch (key) {
case 'Escape':
// 将选中图案时存储的图案变换数据controlStage 拷贝到图案中
this.cancleTransform()
// 图案置空
this.obj = null
break
case 'Enter':
// 图案置空
this.obj = null
break
case 'Delete':
this.obj.remove()
this.obj = null
break
}
}
this.dispatchEvent(_changeEvent)
}
/* 键盘抬起 */
keyup(altKey: boolean, shiftKey: boolean) {
this.shiftKey = shiftKey
this.altKey = altKey
this.dispatchEvent(_changeEvent)
}
/* 相对变换 */
relativeTransform(controlState: string) {
const { transformer, start2Orign, dragStart, dragEnd, end2Orign, obj } =
this
const key = controlState + Number(this.shiftKey)
if (!obj || !transformer[key]) {
return
}
if (controlState === 'move') {
transformer[key](dragStart, dragEnd)
} else {
transformer[key](start2Orign, end2Orign)
}
this.dispatchEvent({ type: 'transformed', obj })
}
/*  设置基点(图案父级坐标系) */
setOrigin() {
const {
altKey,
controlState,
frame: { localCenter, localOpposite },
transformer,
} = this
let curOrigin =
altKey || controlState === 'rotate' ? localCenter : localOpposite
transformer.setOrigin(curOrigin)
}
/* 存储本地模型矩阵的变换数据 */
saveTransformData() {
const { obj, controlStage } = this
obj && this.passTransformData(obj, controlStage)
}
/* 取消变换，恢复图形变换前的状态 */
cancleTransform() {
const { obj, controlStage } = this
obj && this.passTransformData(controlStage, obj)
}
/* 把一个对象的变换数据传递给另一个对象 */
passTransformData(obj0: TranformData, obj1: TranformData) {
const { position, scale, rotate } = obj0
obj1.position.copy(position)
obj1.scale.copy(scale)
obj1.rotate = rotate
}
/* 绘图 */
draw(ctx: CanvasRenderingContext2D) {
const { obj } = this
if (!obj) {
return
}
const { frame, mouseShape, mouseState, controlState, transformer } = this
// 设置本地模型矩阵
controlState && obj.decomposeModelMatrix(transformer.matrix)
/* 绘制外框 */
frame.draw(ctx)
/* 绘制鼠标图案 */
mouseShape.draw(ctx, mouseState)
}
}
export { TransformControler }

其中的变换逻辑我之前都说过，大家可以结合注释自己看一下。

接下来我们先使用图案做一下变换测试。

6-变换图案

参照之间的ImgControler.vue，建立一个TransformControler.vue，用于测试刚才建立的变换组件。

整体代码如下：

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { TransformControler } from '../lmm/controler/TransformControler'
import { OrbitControler } from '../lmm/controler/OrbitControler'
import { Scene } from '../lmm/core/Scene'
import { Vector2 } from '../lmm/math/Vector2'
import { Group } from '../lmm/objects/Group'
import { ImagePromises, SelectObj } from '../lmm/objects/ObjectUtils'
import { Object2D } from '../lmm/objects/Object2D'
import { Img2D } from '../lmm/objects/Img2D'
// 获取父级属性
defineProps({
size: { type: Object, default: { width: 0, height: 0 } },
})
// 鼠标样式
const cursor = ref('default')
// 对应canvas 画布的Ref对象
const canvasRef = ref<HTMLCanvasElement>()
/* 场景 */
const scene = new Scene()
/* 相机轨道控制器 */
const orbitControler = new OrbitControler(scene.camera)
/* 图案控制器 */
const transformControler = new TransformControler()
scene.add(transformControler)
const images: HTMLImageElement[] = []
for (let i = 1; i < 5; i++) {
const image = new Image()
image.src = `https://yxyy-pandora.oss-cn-beijing.aliyuncs.com/stamp-images/${i}.png`
images.push(image)
}
const imagePromises = ImagePromises(images)
/* 鼠标滑上的图案 */
let imgHover: Object2D | null
/* 选择图案的方法 */
const selectObj = SelectObj(scene)
/* 图形集合 */
const group = new Group()
scene.add(group)
/* 所有图片加载完成 */
function onAllImageLoaded() {
/* 添加图像 */
group.add(
...images.map((image, i) => {
const size = new Vector2(image.width, image.height).multiplyScalar(0.3)
return new Img2D({
image,
position: new Vector2(0, i * 150 - 250),
offset: new Vector2(-size.x / 2, -size.y / 2),
rotate: 0.3,
size,
name: 'img-' + i,
style: {
shadowColor: 'rgba(0,0,0,0.5)',
shadowBlur: 5,
shadowOffsetY: 20,
},
})
})
)
/* 渲染 */
scene.render()
}
/* 按需渲染 */
orbitControler.addEventListener('change', () => {
scene.render()
})
transformControler.addEventListener('change', () => {
scene.render()
})
/* 鼠标按下*/
function pointerdown(event: PointerEvent) {
const { button, clientX, clientY } = event
const mp = scene.clientToClip(clientX, clientY)
switch (button) {
case 0:
imgHover = selectObj(group.children, mp)
transformControler.pointerdown(imgHover, mp)
updateMouseCursor()
break
case 1:
orbitControler.pointerdown(clientX, clientY)
break
}
}
/* 鼠标移动 */
function pointermove(event: PointerEvent) {
const { clientX, clientY } = event
const mp = scene.clientToClip(clientX, clientY)
orbitControler.pointermove(clientX, clientY)
transformControler.pointermove(mp)
imgHover = selectObj(group.children, mp)
updateMouseCursor()
}
/* 滑动滚轮缩放 */
function wheel({ deltaY }: WheelEvent) {
orbitControler.doScale(deltaY)
}
/* 鼠标抬起 */
window.addEventListener('pointerup', (event: PointerEvent) => {
switch (event.button) {
case 0:
transformControler.pointerup()
break
case 1:
orbitControler.pointerup()
break
}
})
/* 键盘按下 */
window.addEventListener(
'keydown',
({ key, altKey, shiftKey }: KeyboardEvent) => {
transformControler.keydown(key, altKey, shiftKey)
updateMouseCursor()
}
)
/* 键盘抬起 */
window.addEventListener('keyup', ({ altKey, shiftKey }: KeyboardEvent) => {
transformControler.keyup(altKey, shiftKey)
})
/* 更新鼠标样式 */
function updateMouseCursor() {
if (transformControler.mouseState) {
cursor.value = 'none'
} else if (imgHover) {
cursor.value = 'pointer'
} else {
cursor.value = 'default'
}
}
onMounted(() => {
const canvas = canvasRef.value
if (canvas) {
scene.setOption({ canvas })
Promise.all(imagePromises).then(onAllImageLoaded)
}
})
</script>
<template>
<canvas
ref="canvasRef"
:style="{ cursor }"
:width="size.width"
:height="size.height"
@pointerdown="pointerdown"
@pointermove="pointermove"
@wheel="wheel"
></canvas>
</template>
<style scoped>
#text {
position: absolute;
left: 15px;
top: 15px;
}
</style>

测过其效果，没啥问题：

总结

在当前的变换逻辑里，因为把偏移矩阵塌陷到了图形的路径和边框之中，而基点也是在图形的本地坐标系内定义的，所以整体的变换逻辑会更加的简洁、明了。

下一章我们会建立一个文字对象，然后变换一下试试。