cbvirtua 1.0.42 → 1.0.44

package/Signature.vue

@@ -0,0 +1,366 @@
+<template>
+  <div class="canvasBox">
+    <div class="canvasWrap">
+      <canvas id="canvas2"></canvas>
+      <canvas id="canvas"></canvas>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { getStroke } from 'perfect-freehand'
+
+onMounted(() => {
+  const canvas = document.getElementById('canvas')
+  const canvas2 = document.getElementById('canvas2')
+  const canvasWidth = 500
+  const canvasHeight = 500
+  const ratio = Math.max(window.devicePixelRatio, 2)
+
+  const initCanvas = canvas => {
+    canvas.width = canvasWidth * ratio
+    canvas.height = canvasHeight * ratio
+    canvas.style.width = canvasWidth + 'px'
+    canvas.style.height = canvasHeight + 'px'
+    const ctx = canvas.getContext('2d')
+    ctx.scale(ratio, ratio)
+    return ctx
+  }
+  const ctx = initCanvas(canvas)
+  const ctx2 = initCanvas(canvas2)
+
+  const rect = canvas.getBoundingClientRect()
+  const windowToCanvas = e => {
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    return {
+      x,
+      y
+    }
+  }
+
+  const average = (a, b) => (a + b) / 2
+
+  const getTwoPointDistance = (x1, y1, x2, y2) => {
+    return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2))
+  }
+
+  // 增量绘制
+  const demo = () => {
+    let isMousedown = false
+    let lastPos = {
+      x: 0,
+      y: 0
+    }
+    canvas.addEventListener('mousedown', e => {
+      isMousedown = true
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+      lastPos = windowToCanvas(e)
+    })
+    window.addEventListener('mousemove', e => {
+      if (!isMousedown) return
+      ctx.beginPath()
+      ctx.moveTo(lastPos.x, lastPos.y)
+      lastPos = windowToCanvas(e)
+      ctx.lineTo(lastPos.x, lastPos.y)
+      ctx.lineWidth = 5
+      ctx.stroke()
+    })
+    window.addEventListener('mouseup', () => {
+      isMousedown = false
+    })
+  }
+  // demo()
+
+  // 重新绘制
+  const demo2 = () => {
+    let isMousedown = false
+    let pointList = []
+    let lastPos = null
+    canvas.addEventListener('mousedown', e => {
+      isMousedown = true
+      lastPos = windowToCanvas(e)
+      pointList.push(lastPos)
+    })
+    window.addEventListener('mousemove', e => {
+      if (!isMousedown) return
+      const curPos = windowToCanvas(e)
+      const distance = getTwoPointDistance(
+        curPos.x,
+        curPos.y,
+        lastPos.x,
+        lastPos.y
+      )
+      if (distance <= 4) {
+        return
+      }
+      lastPos = curPos
+      pointList.push(curPos)
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+      ctx.beginPath()
+      pointList.forEach((point, index) => {
+        if (index === 0) {
+          ctx.moveTo(point.x, point.y)
+        } else {
+          ctx.lineTo(point.x, point.y)
+        }
+      })
+      ctx.lineWidth = 5
+      ctx.stroke()
+    })
+    window.addEventListener('mouseup', () => {
+      isMousedown = false
+      pointList = []
+    })
+  }
+  // demo2()
+
+  // 曲线连接
+  const demo3 = () => {
+    let isMousedown = false
+    let pointList = []
+    let lastPos = null
+    canvas.addEventListener('mousedown', e => {
+      isMousedown = true
+      lastPos = windowToCanvas(e)
+      pointList.push(lastPos)
+    })
+    window.addEventListener('mousemove', e => {
+      if (!isMousedown) return
+      const curPos = windowToCanvas(e)
+      const distance = getTwoPointDistance(
+        curPos.x,
+        curPos.y,
+        lastPos.x,
+        lastPos.y
+      )
+      if (distance <= 4) {
+        return
+      }
+      lastPos = curPos
+      pointList.push(windowToCanvas(e))
+      const len = pointList.length
+      if (len < 4) {
+        return
+      }
+      const lastControlPoint = {
+        x: 0,
+        y: 0
+      }
+      const lastEndPoint = {
+        x: 0,
+        y: 0
+      }
+      let a = pointList[0]
+      let b = pointList[1]
+      const c = pointList[2]
+
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+      ctx.beginPath()
+      ctx.moveTo(a.x, a.y)
+
+      // 记录控制点和终点
+      lastControlPoint.x = b.x
+      lastControlPoint.y = b.y
+      lastEndPoint.x = average(b.x, c.x)
+      lastEndPoint.y = average(b.y, c.y)
+
+      ctx.quadraticCurveTo(
+        lastControlPoint.x,
+        lastControlPoint.y,
+        lastEndPoint.x,
+        lastEndPoint.y
+      )
+
+      for (let i = 2, max = len - 1; i < max; i++) {
+        a = pointList[i]
+        b = pointList[i + 1]
+        // 更新控制点和终点
+        lastControlPoint.x =
+          lastEndPoint.x + (lastEndPoint.x - lastControlPoint.x)
+        lastControlPoint.y =
+          lastEndPoint.y + (lastEndPoint.y - lastControlPoint.y)
+        lastEndPoint.x = average(a.x, b.x)
+        lastEndPoint.y = average(a.y, b.y)
+        ctx.quadraticCurveTo(
+          lastControlPoint.x,
+          lastControlPoint.y,
+          lastEndPoint.x,
+          lastEndPoint.y
+        )
+      }
+
+      ctx.lineWidth = 5
+      ctx.stroke()
+    })
+    window.addEventListener('mouseup', () => {
+      isMousedown = false
+      pointList = []
+    })
+  }
+  // demo3()
+
+  const perfect = () => {
+    let isMousedown = false
+    let pointList = []
+    let lineList = []
+    let line = null
+    canvas.addEventListener('mousedown', e => {
+      isMousedown = true
+      pointList = []
+      pointList.push(windowToCanvas(e))
+    })
+    window.addEventListener('mousemove', e => {
+      if (!isMousedown) return
+      pointList.push(windowToCanvas(e))
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+      lineList.forEach(item => {
+        ctx.fill(item)
+      })
+      const points = getStroke(pointList, {
+        size: 16,
+        thinning: 0.5,
+        smoothing: 0.5,
+        streamline: 0.5,
+        start: {
+          cap: true,
+          taper: 0,
+          easing: t => t
+        },
+        end: {
+          cap: true,
+          taper: 0,
+          easing: t => t
+        }
+      })
+      const pathData = getSvgPathFromStroke(points)
+      const path = new Path2D(pathData)
+      line = path
+      ctx.fill(path)
+    })
+    window.addEventListener('mouseup', () => {
+      isMousedown = false
+      lineList.push(line)
+    })
+
+    const getSvgPathFromStroke = points => {
+      const len = points.length
+      if (len < 4) {
+        return ''
+      }
+      let a = points[0]
+      let b = points[1]
+      const c = points[2]
+      let result = `M${a[0]},${a[1]} Q${b[0]},${b[1]} ${average(
+        b[0],
+        c[0]
+      )},${average(b[1], c[1])} T`
+      for (let i = 2, max = len - 1; i < max; i++) {
+        a = points[i]
+        b = points[i + 1]
+        result += `${average(a[0], b[0])},${average(a[1], b[1])} `
+      }
+      result += 'Z'
+      return result
+    }
+  }
+  // perfect()
+
+  // 两个canvas
+  const perfect2 = () => {
+    let isMousedown = false
+    let pointList = []
+    let lineList = []
+    let line = null
+    const clearCanvas = _ctx => {
+      _ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+    }
+    canvas.addEventListener('mousedown', e => {
+      isMousedown = true
+      pointList = []
+      pointList.push(windowToCanvas(e))
+    })
+    window.addEventListener('mousemove', e => {
+      if (!isMousedown) return
+      pointList.push(windowToCanvas(e))
+      clearCanvas(ctx)
+      const points = getStroke(pointList, {
+        size: 16,
+        thinning: 0.5,
+        smoothing: 0.5,
+        streamline: 0.5,
+        start: {
+          cap: true,
+          taper: 0,
+          easing: t => t
+        },
+        end: {
+          cap: true,
+          taper: 0,
+          easing: t => t
+        }
+      })
+      const pathData = getSvgPathFromStroke(points)
+      const path = new Path2D(pathData)
+      line = path
+      ctx.fill(path)
+    })
+    window.addEventListener('mouseup', () => {
+      isMousedown = false
+      lineList.push(line)
+      // 绘制完成后就将图形移到canvas2
+      clearCanvas(ctx)
+      clearCanvas(ctx2)
+      lineList.forEach(item => {
+        ctx2.fill(item)
+      })
+    })
+
+    const getSvgPathFromStroke = points => {
+      const len = points.length
+      if (len < 4) {
+        return ''
+      }
+      let a = points[0]
+      let b = points[1]
+      const c = points[2]
+      let result = `M${a[0]},${a[1]} Q${b[0]},${b[1]} ${average(
+        b[0],
+        c[0]
+      )},${average(b[1], c[1])} T`
+      for (let i = 2, max = len - 1; i < max; i++) {
+        a = points[i]
+        b = points[i + 1]
+        result += `${average(a[0], b[0])},${average(a[1], b[1])} `
+      }
+      result += 'Z'
+      return result
+    }
+  }
+  perfect2()
+})
+</script>
+
+<style lang="less" scoped>
+.canvasBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .canvasWrap {
+    position: relative;
+    width: 500px;
+    height: 500px;
+  }
+
+  canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+    border: 1px solid;
+  }
+}
+</style>

package/canvas-event-system/build/canvas-event-system/EventSimulator.d.ts

@@ -0,0 +1,20 @@
+import { Listener, EventNames } from './shapes';
+export interface Action {
+    type: ActionType;
+    id: string;
+}
+export declare enum ActionType {
+    Down = "DOWN",
+    Up = "Up",
+    Move = "MOVE"
+}
+export default class EventSimulator {
+    private listenersMap;
+    private lastDownId;
+    private lastMoveId;
+    addAction(action: Action, evt: MouseEvent): void;
+    addListeners(id: string, listeners: {
+        [eventName: string]: Listener[];
+    }): void;
+    fire(id: string, eventName: EventNames, evt: MouseEvent): void;
+}

package/canvas-event-system/build/canvas-event-system/EventSimulator.js

@@ -0,0 +1,51 @@
+import { EventNames } from './shapes';
+export var ActionType;
+(function (ActionType) {
+    ActionType["Down"] = "DOWN";
+    ActionType["Up"] = "Up";
+    ActionType["Move"] = "MOVE";
+})(ActionType || (ActionType = {}));
+export default class EventSimulator {
+    listenersMap = {};
+    lastDownId;
+    lastMoveId;
+    addAction(action, evt) {
+        const { type, id } = action;
+        // mousemove
+        if (type === ActionType.Move) {
+            this.fire(id, EventNames.mousemove, evt);
+        }
+        // mouseover
+        // mouseenter
+        if (type === ActionType.Move && (!this.lastMoveId || this.lastMoveId !== id)) {
+            this.fire(id, EventNames.mouseenter, evt);
+            this.fire(this.lastMoveId, EventNames.mouseleave, evt);
+        }
+        // mousedown
+        if (type === ActionType.Down) {
+            this.fire(id, EventNames.mousedown, evt);
+        }
+        // mouseup
+        if (type === ActionType.Up) {
+            this.fire(id, EventNames.mouseup, evt);
+        }
+        // click
+        if (type === ActionType.Up && this.lastDownId === id) {
+            this.fire(id, EventNames.click, evt);
+        }
+        if (type === ActionType.Move) {
+            this.lastMoveId = action.id;
+        }
+        else if (type === ActionType.Down) {
+            this.lastDownId = action.id;
+        }
+    }
+    addListeners(id, listeners) {
+        this.listenersMap[id] = listeners;
+    }
+    fire(id, eventName, evt) {
+        if (this.listenersMap[id] && this.listenersMap[id][eventName]) {
+            this.listenersMap[id][eventName].forEach((listener) => listener(evt));
+        }
+    }
+}

package/canvas-event-system/build/canvas-event-system/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare function idToRgba(id: string): string[];
+export declare function rgbaToId(rgba: [number, number, number, number]): string;
+export declare function createId(): string;

package/canvas-event-system/build/canvas-event-system/helpers.js

@@ -0,0 +1,21 @@
+export function idToRgba(id) {
+    return id.split("-");
+}
+export function rgbaToId(rgba) {
+    return rgba.join("-");
+}
+const idPool = {};
+export function createId() {
+    let id = createOnceId();
+    while (idPool[id]) {
+        id = createOnceId();
+    }
+    return id;
+}
+function createOnceId() {
+    return Array(3)
+        .fill(0)
+        .map(() => Math.ceil(Math.random() * 255))
+        .concat(255)
+        .join("-");
+}

package/canvas-event-system/build/canvas-event-system/index.d.ts

@@ -0,0 +1,20 @@
+import { Shape } from './shapes/types';
+export * from './shapes';
+export declare class Stage {
+    private canvas;
+    private osCanvas;
+    private ctx;
+    private osCtx;
+    private dpr;
+    private shapes;
+    private eventSimulator;
+    constructor(canvas: HTMLCanvasElement);
+    add(shape: Shape): void;
+    private handleCreator;
+    /**
+     * Determine whether the current position is inside a certain shape, if it is, then return its id
+     * @param x
+     * @param y
+     */
+    private hitJudge;
+}

package/canvas-event-system/build/canvas-event-system/index.js

@@ -0,0 +1,51 @@
+import { rgbaToId } from './helpers';
+import EventSimulator, { ActionType } from './EventSimulator';
+export * from './shapes';
+export class Stage {
+    canvas;
+    osCanvas;
+    ctx;
+    osCtx;
+    dpr;
+    shapes;
+    eventSimulator;
+    constructor(canvas) {
+        const dpr = window.devicePixelRatio;
+        canvas.width = parseInt(canvas.style.width) * dpr;
+        canvas.height = parseInt(canvas.style.height) * dpr;
+        this.canvas = canvas;
+        this.osCanvas = new OffscreenCanvas(canvas.width, canvas.height);
+        this.ctx = this.canvas.getContext('2d');
+        this.osCtx = this.osCanvas.getContext('2d');
+        this.ctx.scale(dpr, dpr);
+        this.osCtx.scale(dpr, dpr);
+        this.dpr = dpr;
+        this.canvas.addEventListener('mousedown', this.handleCreator(ActionType.Down));
+        this.canvas.addEventListener('mouseup', this.handleCreator(ActionType.Up));
+        this.canvas.addEventListener('mousemove', this.handleCreator(ActionType.Move));
+        this.shapes = new Set();
+        this.eventSimulator = new EventSimulator();
+    }
+    add(shape) {
+        const id = shape.getId();
+        this.eventSimulator.addListeners(id, shape.getListeners());
+        this.shapes.add(id);
+        shape.draw(this.ctx, this.osCtx);
+    }
+    handleCreator = (type) => (evt) => {
+        const x = evt.offsetX;
+        const y = evt.offsetY;
+        const id = this.hitJudge(x, y);
+        this.eventSimulator.addAction({ type, id }, evt);
+    };
+    /**
+     * Determine whether the current position is inside a certain shape, if it is, then return its id
+     * @param x
+     * @param y
+     */
+    hitJudge(x, y) {
+        const rgba = Array.from(this.osCtx.getImageData(x * this.dpr, y * this.dpr, 1, 1).data);
+        const id = rgbaToId(rgba);
+        return this.shapes.has(id) ? id : undefined;
+    }
+}

package/canvas-event-system/build/canvas-event-system/shapes/Base.d.ts

@@ -0,0 +1,12 @@
+import { EventNames, Listener, Shape } from './types';
+export default class Base implements Shape {
+    private listeners;
+    id: string;
+    constructor();
+    draw(ctx: CanvasRenderingContext2D, osCtx: OffscreenCanvasRenderingContext2D): void;
+    on(eventName: EventNames, listener: Listener): void;
+    getListeners(): {
+        [name: string]: Listener[];
+    };
+    getId(): string;
+}

package/canvas-event-system/build/canvas-event-system/shapes/Base.js

@@ -0,0 +1,26 @@
+import { createId } from '../helpers';
+export default class Base {
+    listeners;
+    id;
+    constructor() {
+        this.id = createId();
+        this.listeners = {};
+    }
+    draw(ctx, osCtx) {
+        throw new Error('Method not implemented.');
+    }
+    on(eventName, listener) {
+        if (this.listeners[eventName]) {
+            this.listeners[eventName].push(listener);
+        }
+        else {
+            this.listeners[eventName] = [listener];
+        }
+    }
+    getListeners() {
+        return this.listeners;
+    }
+    getId() {
+        return this.id;
+    }
+}

package/canvas-event-system/build/canvas-event-system/shapes/Circle.d.ts

@@ -0,0 +1,15 @@
+import Base from './Base';
+interface RectProps {
+    x: number;
+    y: number;
+    radius: number;
+    strokeWidth?: number;
+    strokeColor?: string;
+    fillColor?: string;
+}
+export default class Circle extends Base {
+    private props;
+    constructor(props: RectProps);
+    draw(ctx: CanvasRenderingContext2D, osCtx: OffscreenCanvasRenderingContext2D): void;
+}
+export {};

package/canvas-event-system/build/canvas-event-system/shapes/Circle.js

@@ -0,0 +1,34 @@
+import { idToRgba } from '../helpers';
+import Base from './Base';
+export default class Circle extends Base {
+    props;
+    constructor(props) {
+        super();
+        this.props = props;
+        this.props.fillColor = this.props.fillColor || '#fff';
+        this.props.strokeColor = this.props.strokeColor || '#000';
+        this.props.strokeWidth = this.props.strokeWidth || 1;
+    }
+    draw(ctx, osCtx) {
+        const { x, y, radius, strokeColor, strokeWidth, fillColor } = this.props;
+        ctx.save();
+        ctx.beginPath();
+        ctx.fillStyle = fillColor;
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = strokeWidth;
+        ctx.arc(x, y, radius, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+        ctx.restore();
+        const [r, g, b, a] = idToRgba(this.id);
+        osCtx.save();
+        osCtx.beginPath();
+        osCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
+        osCtx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
+        osCtx.lineWidth = strokeWidth;
+        osCtx.arc(x, y, radius, 0, Math.PI * 2);
+        osCtx.fill();
+        osCtx.stroke();
+        osCtx.restore();
+    }
+}

package/canvas-event-system/build/canvas-event-system/shapes/Rect.d.ts

@@ -0,0 +1,16 @@
+import Base from './Base';
+interface RectProps {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    strokeWidth?: number;
+    strokeColor?: string;
+    fillColor?: string;
+}
+export default class Rect extends Base {
+    private props;
+    constructor(props: RectProps);
+    draw(ctx: CanvasRenderingContext2D, osCtx: OffscreenCanvasRenderingContext2D): void;
+}
+export {};

package/canvas-event-system/build/canvas-event-system/shapes/Rect.js

@@ -0,0 +1,33 @@
+import { idToRgba } from '../helpers';
+import Base from './Base';
+export default class Rect extends Base {
+    props;
+    constructor(props) {
+        super();
+        this.props = props;
+        this.props.fillColor = this.props.fillColor || '#fff';
+        this.props.strokeColor = this.props.strokeColor || '#000';
+        this.props.strokeWidth = this.props.strokeWidth || 1;
+    }
+    draw(ctx, osCtx) {
+        const { x, y, width, height, strokeColor, strokeWidth, fillColor } = this.props;
+        ctx.save();
+        ctx.beginPath();
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = strokeWidth;
+        ctx.fillStyle = fillColor;
+        ctx.rect(x, y, width, height);
+        ctx.fill();
+        ctx.stroke();
+        ctx.restore();
+        const [r, g, b, a] = idToRgba(this.id);
+        osCtx.save();
+        osCtx.beginPath();
+        osCtx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
+        osCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
+        osCtx.rect(x, y, width, height);
+        osCtx.fill();
+        osCtx.stroke();
+        osCtx.restore();
+    }
+}

package/canvas-event-system/build/canvas-event-system/shapes/index.d.ts

@@ -0,0 +1,4 @@
+import Rect from './Rect';
+import Circle from './Circle';
+export * from './types';
+export { Rect, Circle };

package/canvas-event-system/build/canvas-event-system/shapes/index.js

@@ -0,0 +1,4 @@
+import Rect from './Rect';
+import Circle from './Circle';
+export * from './types';
+export { Rect, Circle };

package/canvas-event-system/build/canvas-event-system/shapes/types.d.ts

@@ -0,0 +1,19 @@
+export interface Shape {
+    draw(ctx: CanvasRenderingContext2D, osCtx: OffscreenCanvasRenderingContext2D): void;
+    on(name: string, listener: Listener): void;
+    getListeners(): {
+        [name: string]: Listener[];
+    };
+    getId(): string;
+}
+export interface Listener {
+    (evt: MouseEvent): void;
+}
+export declare enum EventNames {
+    click = "click",
+    mousedown = "mousedown",
+    mousemove = "mousemove",
+    mouseup = "mouseup",
+    mouseenter = "mouseenter",
+    mouseleave = "mouseleave"
+}

package/canvas-event-system/build/canvas-event-system/shapes/types.js

@@ -0,0 +1,9 @@
+export var EventNames;
+(function (EventNames) {
+    EventNames["click"] = "click";
+    EventNames["mousedown"] = "mousedown";
+    EventNames["mousemove"] = "mousemove";
+    EventNames["mouseup"] = "mouseup";
+    EventNames["mouseenter"] = "mouseenter";
+    EventNames["mouseleave"] = "mouseleave";
+})(EventNames || (EventNames = {}));

package/canvas-event-system/build/index.d.ts

@@ -0,0 +1 @@
+export {};

package/canvas-event-system/build/index.js

@@ -0,0 +1,24 @@
+import { Stage, Rect, Circle, EventNames } from './canvas-event-system';
+const canvas = document.querySelector('#canvas');
+const stage = new Stage(canvas);
+const rect = new Rect({
+    x: 50,
+    y: 50,
+    width: 250,
+    height: 175,
+    fillColor: 'green',
+});
+const circle = new Circle({
+    x: 200,
+    y: 200,
+    radius: 100,
+    fillColor: 'red',
+});
+rect.on(EventNames.mousedown, () => console.log('rect mousedown'));
+rect.on(EventNames.mouseup, () => console.log('rect mouseup'));
+rect.on(EventNames.mouseenter, () => console.log('rect mouseenter'));
+rect.on(EventNames.click, () => console.log('rect click'));
+circle.on(EventNames.click, () => console.log('circle click!!'));
+circle.on(EventNames.mouseleave, () => console.log('circle mouseleave!'));
+stage.add(rect);
+stage.add(circle);

package/canvas-event-system/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "module": "ESNext",
     "jsx": "react",
     "jsxFactory": "h",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "description": "",
   "main": "index.js",
   "scripts": {