@meta2d/core 1.0.54 → 1.0.56

package/src/canvas/canvasImage.ts

@@ -0,0 +1,525 @@
+import {
+  ctxFlip,
+  ctxRotate,
+  drawImage,
+  Pen,
+  setGlobalAlpha,
+  getParent,
+  CanvasLayer,
+} from '../pen';
+import { Fit, Meta2dStore } from '../store';
+import { rgba } from '../utils';
+import { createOffscreen } from './offscreen';
+
+export class CanvasImage {
+  canvas = document.createElement('canvas');
+  /**
+   * 非图片的绘制
+   * isBottom true 指背景颜色，背景网格
+   * isBottom false 指 标尺
+   */
+  otherOffsreen = createOffscreen(); // 非图片的
+  offscreen = createOffscreen();
+  animateOffsScreen = createOffscreen();
+  fitOffscreen = createOffscreen();
+  fitFlag = false; //开启自定义填充
+  currentFit:string;
+  activeFit: Fit;
+
+  constructor(
+    public parentElement: HTMLElement,
+    public store: Meta2dStore,
+    private isBottom?: boolean
+  ) {
+    parentElement.appendChild(this.canvas);
+    this.canvas.style.backgroundRepeat = 'no-repeat';
+    this.canvas.style.backgroundSize = '100% 100%';
+    this.canvas.style.position = 'absolute';
+    this.canvas.style.top = '0';
+    this.canvas.style.left = '0';
+  }
+
+  resize(w?: number, h?: number) {
+    this.canvas.style.width = w + 'px';
+    this.canvas.style.height = h + 'px';
+
+    w = (w * this.store.dpiRatio) | 0;
+    h = (h * this.store.dpiRatio) | 0;
+
+    this.canvas.width = w;
+    this.canvas.height = h;
+
+    this.otherOffsreen.width = w;
+    this.otherOffsreen.height = h;
+
+    this.offscreen.width = w;
+    this.offscreen.height = h;
+
+    this.animateOffsScreen.width = w;
+    this.animateOffsScreen.height = h;
+
+    this.fitOffscreen.width = w;
+    this.fitOffscreen.height = h;
+
+    this.otherOffsreen
+      .getContext('2d')
+      .scale(this.store.dpiRatio, this.store.dpiRatio);
+    this.otherOffsreen.getContext('2d').textBaseline = 'middle';
+
+    this.offscreen
+      .getContext('2d')
+      .scale(this.store.dpiRatio, this.store.dpiRatio);
+    this.offscreen.getContext('2d').textBaseline = 'middle';
+
+    this.animateOffsScreen
+      .getContext('2d')
+      .scale(this.store.dpiRatio, this.store.dpiRatio);
+    this.animateOffsScreen.getContext('2d').textBaseline = 'middle';
+
+    this.fitOffscreen
+      .getContext('2d')
+      .scale(this.store.dpiRatio, this.store.dpiRatio);
+    this.fitOffscreen.getContext('2d').textBaseline = 'middle';
+
+    this.init();
+  }
+
+  init() {
+    this.offscreen
+      .getContext('2d')
+      .clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.animateOffsScreen
+      .getContext('2d')
+      .clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.fitOffscreen
+      .getContext('2d')
+      .clearRect(0, 0, this.canvas.width, this.canvas.height);
+    for (const pen of this.store.data.pens) {
+      if (this.hasImage(pen)) {
+        // 只影响本层的
+        pen.calculative.imageDrawed = false;
+      }
+    }
+    if(this.isBottom){
+      this.store.patchFlagsBackground = true;
+    }else{
+      this.store.patchFlagsTop = true;
+    }
+  }
+
+  clear() {
+    this.otherOffsreen
+      .getContext('2d')
+      .clearRect(0, 0, this.otherOffsreen.width, this.otherOffsreen.height);
+    this.offscreen
+      .getContext('2d')
+      .clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.animateOffsScreen
+      .getContext('2d')
+      .clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.fitOffscreen
+      .getContext('2d')
+      .clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.canvas
+      .getContext('2d')
+      .clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  hasImage(pen: Pen) {
+    pen.calculative.hasImage =
+      pen.calculative &&
+      pen.calculative.inView &&
+      // !pen.isBottom == !this.isBottom && // undefined == false 结果 false
+      ((this.isBottom && pen.canvasLayer === CanvasLayer.CanvasImageBottom) ||
+        (!this.isBottom && pen.canvasLayer === CanvasLayer.CanvasImage)) &&
+      pen.image &&
+      pen.calculative.img &&
+      pen.name !== 'gif';
+
+    return pen.calculative.hasImage;
+  }
+
+  render() {
+    let patchFlags = false;
+    let patchFlagsAnimate = false;
+    for (const pen of this.store.data.pens) {
+      if (this.hasImage(pen)) {
+        if (this.store.animates.has(pen)) {
+          patchFlagsAnimate = true;
+        } else if (!pen.calculative.imageDrawed) {
+          patchFlags = true;
+        }
+        if (pen.parentId && this.store.animates.has(getParent(pen, true))) {
+          patchFlagsAnimate = true;
+        }
+      }
+    }
+
+    const patchFlagsBackground = this.store.patchFlagsBackground;
+    // if (patchFlagsBackground && this.isBottom) {
+    //   const ctx = this.otherOffsreen.getContext('2d');
+    //   ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    //   const width = this.store.data.width || this.store.options.width;
+    //   const height = this.store.data.height || this.store.options.height;
+    //   const x = this.store.data.x || this.store.options.x;
+    //   const y = this.store.data.y || this.store.options.y;
+    //   if (width && height && this.store.bkImg) {
+    //     ctx.save();
+    //     ctx.drawImage(
+    //       this.store.bkImg,
+    //       this.store.data.origin.x + x,
+    //       this.store.data.origin.y + y,
+    //       width * this.store.data.scale,
+    //       height * this.store.data.scale
+    //     );
+    //     ctx.restore();
+    //   }
+    //   const background =
+    //     this.store.data.background ||
+    //     (this.store.bkImg ? undefined : this.store.options.background);
+    //   if (background) {
+    //     ctx.save();
+    //     ctx.fillStyle = background;
+    //     if (width && height) {
+    //       ctx.fillRect(
+    //         this.store.data.origin.x + x,
+    //         this.store.data.origin.y + y,
+    //         width * this.store.data.scale,
+    //         height * this.store.data.scale
+    //       );
+    //     } else {
+    //       ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    //     }
+    //     ctx.restore();
+    //   }
+    //   this.renderGrid(ctx);
+    // }
+
+    const patchFlagsTop = this.store.patchFlagsTop;
+    if (patchFlagsTop && !this.isBottom) {
+      const ctx = this.otherOffsreen.getContext('2d');
+      ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.renderRule(ctx);
+    }
+    // 从有图片画布层切换到无图片画布
+    const patchFlagsLast = this.store.patchFlagsLast;
+    if (patchFlagsLast) {
+      const ctx = this.offscreen.getContext('2d');
+      ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+    if (patchFlags) {
+      const ctx = this.offscreen.getContext('2d');
+      ctx.save();
+      ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      ctx.translate(this.store.data.x, this.store.data.y);
+      for (const pen of this.store.data.pens) {
+        //pen.calculative.imageDrawed  只用于判断是否需要重绘整块画布，不用于判断改图片节点是否绘制过
+        if (
+          !pen.calculative.hasImage ||
+          this.store.animates.has(pen) ||
+          this.store.animates.has(getParent(pen, true))
+        ) {
+          continue;
+        }
+        // if (pen.template) {
+        if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
+          continue;
+        }
+        pen.calculative.imageDrawed = true;
+        ctx.save();
+        ctxFlip(ctx, pen);
+        if (pen.calculative.rotate) {
+          ctxRotate(ctx, pen);
+        }
+
+        setGlobalAlpha(ctx, pen);
+        drawImage(ctx, pen);
+        ctx.restore();
+      }
+      ctx.restore();
+    }
+    if (patchFlagsAnimate) {
+      const ctx = this.animateOffsScreen.getContext('2d');
+      ctx.save();
+      ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      ctx.translate(this.store.data.x, this.store.data.y);
+      for (const pen of this.store.animates) {
+        if (!pen.calculative.hasImage) {
+          continue;
+        }
+        // if (pen.template) {
+        if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
+          continue;
+        }
+        pen.calculative.imageDrawed = true;
+        ctx.save();
+        ctxFlip(ctx, pen);
+        if (pen.calculative.rotate) {
+          ctxRotate(ctx, pen);
+        }
+
+        setGlobalAlpha(ctx, pen);
+        drawImage(ctx, pen);
+        ctx.restore();
+      }
+      //图片组合节点 动画
+      for (const pen of this.store.data.pens) {
+        if (!pen.calculative.hasImage || !pen.parentId) {
+          continue;
+        }
+        // if (pen.template) {
+        if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
+          continue;
+        }
+        if (this.store.animates.has(getParent(pen, true))) {
+          pen.calculative.imageDrawed = true;
+          ctx.save();
+          ctxFlip(ctx, pen);
+          if (pen.calculative.rotate) {
+            ctxRotate(ctx, pen);
+          }
+
+          setGlobalAlpha(ctx, pen);
+          drawImage(ctx, pen);
+          ctx.restore();
+        }
+      }
+      ctx.restore();
+    }
+
+    if (!this.isBottom && !this.store.data.locked && this.fitFlag) {
+      const width =
+        (this.store.data.width || this.store.options.width) *
+        this.store.data.scale;
+      const height =
+        (this.store.data.height || this.store.options.height) *
+        this.store.data.scale;
+      const x =
+        this.store.data.origin.x + this.store.data.x ||
+        this.store.options.x ||
+        0;
+      const y =
+        this.store.data.origin.y + this.store.data.y ||
+        this.store.options.y ||
+        0;
+      const ctx = this.fitOffscreen.getContext('2d');
+      ctx.save();
+      ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      ctx.fillStyle = '#ffffff66';
+      ctx.strokeStyle = this.store.options.activeColor;
+      this.store.data.fits?.forEach((item, index) => {
+        ctx.fillRect(
+          x + width * item.x,
+          y + height * item.y,
+          width * item.width,
+          height * item.height
+        );
+        if (item.active) {
+          ctx.strokeRect(
+            x + width * item.x,
+            y + height * item.y,
+            width * item.width,
+            height * item.height
+          );
+        }
+      });
+      ctx.restore();
+    }
+    if (
+      patchFlags ||
+      patchFlagsAnimate ||
+      (patchFlagsBackground && this.isBottom) ||
+      // this.isBottom ||
+      (patchFlagsTop && !this.isBottom)
+    ) {
+      const ctxCanvas = this.canvas.getContext('2d');
+      ctxCanvas.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      if (this.isBottom) {
+      //   ctxCanvas.drawImage(
+      //     this.otherOffsreen,
+      //     0,
+      //     0,
+      //     this.canvas.width,
+      //     this.canvas.height
+      //   );
+        this.store.patchFlagsBackground = false;
+      }
+      ctxCanvas.drawImage(
+        this.offscreen,
+        0,
+        0,
+        this.canvas.width,
+        this.canvas.height
+      );
+      ctxCanvas.drawImage(
+        this.animateOffsScreen,
+        0,
+        0,
+        this.canvas.width,
+        this.canvas.height
+      );
+      if (!this.isBottom) {
+        ctxCanvas.drawImage(
+          this.otherOffsreen,
+          0,
+          0,
+          this.canvas.width,
+          this.canvas.height
+        );
+        this.store.patchFlagsTop = false;
+        if (!this.store.data.locked && this.fitFlag) {
+          ctxCanvas.drawImage(
+            this.fitOffscreen,
+            0,
+            0,
+            this.canvas.width,
+            this.canvas.height
+          );
+        }
+      }
+    }
+  }
+
+  // renderGrid(
+  //   ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
+  // ) {
+  //   const { data, options } = this.store;
+  //   const { grid, gridRotate, gridColor, gridSize, scale } = data;
+  //   if (!(grid ?? options.grid)) {
+  //     // grid false 时不绘制, undefined 时看 options.grid
+  //     return;
+  //   }
+  //   ctx.save();
+  //   const { width, height } = this.canvas;
+  //   if (gridRotate) {
+  //     ctx.translate(width / 2, height / 2);
+  //     ctx.rotate((gridRotate * Math.PI) / 180);
+  //     ctx.translate(-width / 2, -height / 2);
+  //   }
+  //   ctx.lineWidth = 1;
+  //   ctx.strokeStyle = gridColor || options.gridColor;
+  //   ctx.beginPath();
+  //   const size = (gridSize || options.gridSize) * scale;
+  //   const longSide = Math.max(width, height);
+  //   const count = Math.ceil(longSide / size);
+  //   for (let i = -size * count; i < longSide * 2; i += size) {
+  //     ctx.moveTo(i, -longSide);
+  //     ctx.lineTo(i, longSide * 2);
+  //   }
+  //   for (let i = -size * count; i < longSide * 2; i += size) {
+  //     ctx.moveTo(-longSide, i);
+  //     ctx.lineTo(longSide * 2, i);
+  //   }
+  //   ctx.stroke();
+  //   ctx.restore();
+  // }
+
+  renderRule(
+    ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
+  ) {
+    const { data, options } = this.store;
+    const { rule, ruleColor, scale, origin } = data;
+    if (!(rule ?? options.rule)) {
+      // rule false 时不绘制, undefined 时看 options.rule
+      return;
+    }
+
+    const span = scale * 10;
+
+    ctx.save();
+
+    const finalRuleColor = ruleColor || options.ruleColor;
+    ctx.strokeStyle = rgba(finalRuleColor, 0.7);
+
+    const x = origin.x + data.x;
+    const y = origin.y + data.y;
+    const { width, height } = this.canvas;
+    let h = options.ruleOptions?.height || 20;
+    if(options.ruleOptions?.background){
+      //背景颜色
+      ctx.beginPath();
+      ctx.fillStyle = options.ruleOptions?.background;
+      ctx.rect(0,0,width,h);
+      ctx.fill();
+      ctx.rect(0,0,h,height);
+      ctx.fill();
+    }
+    if(options.ruleOptions?.underline){
+      ctx.beginPath();
+      ctx.fillStyle = rgba(finalRuleColor, 0.7);
+      ctx.moveTo(0, h);
+      ctx.lineTo(width, h);
+      ctx.stroke();
+      ctx.moveTo(h, 0);
+      ctx.lineTo(h, height);
+      ctx.stroke();
+    }
+    let b_y = h/4;
+    if(options.ruleOptions?.baseline === "bottom"){
+      b_y = h*3/4;
+    }
+    // horizontal rule
+    ctx.beginPath();
+    ctx.lineWidth = h/2;
+    ctx.lineDashOffset = -x % span;
+    ctx.setLineDash([1, span - 1]);
+    ctx.moveTo(0, b_y);
+    ctx.lineTo(width, b_y);
+    ctx.stroke();
+
+    // vertical rule
+    ctx.beginPath();
+    ctx.lineDashOffset = -y % span;
+    ctx.moveTo(b_y, 0);
+    ctx.lineTo(b_y, height);
+    ctx.stroke();
+
+    // the big rule
+    ctx.strokeStyle = finalRuleColor;
+    ctx.beginPath();
+    ctx.lineWidth = h;
+    ctx.lineDashOffset = -x % (span * 10);
+    ctx.setLineDash([1, span * 10 - 1]);
+    ctx.moveTo(0, h/2);
+    ctx.lineTo(width, h/2);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.lineDashOffset = -y % (span * 10);
+    ctx.moveTo(h/2, 0);
+    ctx.lineTo(h/2, height);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.fillStyle = options.ruleOptions?.textColor|| ctx.strokeStyle;
+    let text: number = 0 - Math.floor(x / span / 10) * 100;
+    let textTop = options.ruleOptions?.textTop || 16;
+    let textLeft = options.ruleOptions?.textLeft || 4;
+    if (x < 0) {
+      text -= 100;
+    }
+    for (let i = x % (span * 10); i < width; i += 10 * span, text += 100) {
+      if (span < 3 && text % 500) {
+        continue;
+      }
+      ctx.fillText(text.toString(), i + textLeft, textTop);
+    }
+
+    text = 0 - Math.floor(y / span / 10) * 100;
+    if (y < 0) {
+      text -= 100;
+    }
+    for (let i = y % (span * 10); i < height; i += 10 * span, text += 100) {
+      if (span < 3 && text % 500) {
+        continue;
+      }
+      ctx.save();
+      ctx.beginPath();
+      ctx.translate(textTop, i - textLeft);
+      ctx.rotate((270 * Math.PI) / 180);
+      ctx.fillText(text.toString(), 0, 0);
+      ctx.restore();
+    }
+    ctx.restore();
+  }
+}