canvas中的拖拽、缩放、旋转 (下) —— 代码实现

ctx.save(); // 保存旧的坐标系状态
ctx.translate(x0 + w / 2, y0 + h / 2); // 坐标原点移动到旋转中心
ctx.rotate(angle); // 旋转坐标系
ctx.translate(-(x0 + w / 2),  -(y0 + h / 2)); // 坐标原点还原
ctx.rect(x0, y0, w, h); // 以新坐标系为参照，画出矩形。
ctx.restore(); // 还原之前的坐标系状态
1.
2.
3.
4.
5.
6.

class Stage {
    constructor(props) {
        
        this.canvas = props.canvas;
        this.ctx = this.canvas.getContext('2d');
        
        // 用一个数组来保存canvas中的元素。每一个元素都是一个Sprite类的实例。
        this.spriteList = []; 

        // 获取canvas在视窗中的位置，以便计算用户touch时，相对与canvas内部的坐标。
        const pos = this.canvas.getBoundingClientRect(); 
        this.canvasOffsetLeft = pos.left;
        this.canvasOffsetTop = pos.top;

        this.dragSpriteTarget = null; // 拖拽的对象
        this.scaleSpriteTarget = null; // 缩放的对象
        this.rotateSpriteTarget = null; // 旋转的对象

        this.dragStartX = undefined; 
        this.dragStartY = undefined;
        this.scaleStartX = undefined;
        this.scaleStartY = undefined;
        this.rotateStartX = undefined;
        this.rotateStartY = undefined;

    }
}

class Sprite {
    constructor(props) {
        
        // 每一个sprite都有一个唯一的id
        this.id = Date.now() + Math.floor(Math.random() * 10);
        
        this.pos = props.pos; // 在canvas中的位置
        this.size = props.size; // sprite的当前大小
        this.baseSize = props.size; // sprite的初始化大小
        this.minSize = props.minSize; // sprite缩放时允许的最小size
        this.maxSize = props.maxSize; // sprite缩放时允许的最大size
        
        // 中心点坐标
        this.center = [
            props.pos[0] + props.size[0] / 2, 
            props.pos[1] + props.size[1] / 2
        ];
        
        this.delIcon = null;
        this.scaleIcon = null;
        this.rotateIcon = null;

        // 四个顶点的坐标,顺序为：左上，右上，左下，右下
        this.coordinate = this.setCoordinate(this.pos, this.size); 

        this.rotateAngle = 0; // 累计旋转的角度
        this.rotateAngleDir = 0; // 每次旋转角度

        this.scalePercent = 1; // 缩放比例
        
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.

window.onload = function () {

    const stage = new Stage({
        canvas: document.querySelector('canvas')
    });

    document.querySelector('.red-box').addEventListener('click', function () {
        const randomX = Math.floor(Math.random() * 200);
        const randomY = Math.floor(Math.random() * 200);
        const sprite = new Sprite({
            pos: [randomX, randomY],
            size: [120, 60],
            minSize: [40, 20],
            maxSize: [240, 120]
        });
        stage.append(sprite);
    });
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

class Stage {

    constructor(props) {}

    // 将sprite添加到stage内
    append(sprite) {}

    // 监听事件
    initEvent() {}

    // 处理touchstart
    handleTouchStart(e) {}

    // 处理touchmove
    handleTouchMove(e) {}

    // 处理touchend
    handleTouchEnd() {}

    // 初始化sprite的拖拽事件
    initDragEvent(sprite, { touchX, touchY }) {}

    // 初始化sprite的缩放事件
    initScaleEvent(sprite, { touchX, touchY }) {}

    // 初始化sprite的旋转事件
    initRotateEvent(sprite, { touchX, touchY }) {}

    // 通过触摸的坐标重新计算sprite的坐标
    reCalSpritePos(sprite, touchX, touchY) {}

    // 通过触摸的【横】坐标重新计算sprite的大小
    reCalSpriteSize(sprite, touchX, touchY) {}

    // 重新计算sprite的角度
    reCalSpriteRotate(sprite, touchX, touchY) {}

    // 返回当前touch的sprite
    getTouchSpriteTarget({ touchX, touchY }) {}

    // 判断是否touch在了sprite中的某一部分上，返回这个sprite
    getTouchTargetOfSprite({ touchX, touchY }, part) {}

    // 返回触摸点相对于canvas的坐标
    normalizeTouchEvent(e) {}

    // 判断是否在在某个sprite中移动。当前默认所有的sprite都是长方形的。
    checkIfTouchIn({ touchX, touchY }, sprite) {}

    // 从场景中删除
    remove(sprite) {}

    // 画出stage中的所有sprite
    drawSprite() {}

    // 清空画布
    clearStage() {}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.

class Sprite {

    constructor(props) {}

    // 设置四个顶点的初始化坐标
    setCoordinate(pos, size) {}
    
    // 根据旋转角度更新sprite的所有部分的顶点坐标
    updateCoordinateByRotate() {}
    
    // 根据旋转角度更新顶点坐标
    updateItemCoordinateByRotate(target, center, angle){}

    // 根据缩放比例更新顶点坐标
    updateItemCoordinateByScale(sprite, center, scale) {}

    // 根据按钮icon的顶点坐标获取icon中心点坐标
    getIconCenter(iconCoordinate) {}

    // 根据按钮icon的中心点坐标获取icon的顶点坐标
    getIconCoordinateByIconCenter(center) {}

    // 根据缩放比更新顶点坐标
    updateCoordinateByScale() {}

    // 画出该sprite
    draw(ctx) {}

    // 画出该sprite对应的按钮icon
    drawIcon(ctx, icon) {}

    // 对sprite进行初始化
    init() {}

    // 初始化删除按钮，左下角
    initDelIcon() {}

    // 初始化缩放按钮，右上角
    initScaleIcon() {}

    // 初始化旋转按钮，左上角
    initRotateIcon() {}

    // 重置icon的位置与大小
    resetIconPos() {}

    // 根据移动的距离重置sprite所有部分的位置
    resetPos(dirX, dirY) {}

    // 根据触摸点移动的距离计算缩放比，并重置sprite的尺寸
    resetSize(dir) {}

    // 设置sprite的旋转角度
    setRotateAngle(angleDir) {}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.