@ray-js/graffiti 1.0.0 → 1.1.3

package/README.md

@@ -31,8 +31,10 @@ yarn start:tuya
 - By changing the operation type, you can switch to pencil mode, eraser mode, paint bucket mode
 - By changing `penColor`, you can pass in different pen colors
 - `needStroke` is `true`, start monitoring each brush data, and get the x, y coordinate path data of each brush stroke through `onStrokeChange`
-- By updating the value of `saveTrigger`, you can trigger canvas saving and return the base64 data of the canvas
-- By updating the value of `clearTrigger`, you can trigger canvas clearing
+- Updating the `saveTrigger` value triggers canvas saving, returning the canvas's base64 data and grid color data.
+- Updating the `clearTrigger` value triggers canvas clearing.
+- The `scale` function allows scaling the canvas.
+- `isDragging` disables drawing; the canvas can be dragged when it exceeds the limit.
 
 ```tsx
 import React, { useState } from 'react';

package/lib/components/index.js

@@ -1,5 +1,5 @@
 import Render from './index.rjs';
-import { getSystemInfoSync } from '@ray-js/ray';
+import { getSystemInfoSync, getElementById, getBoundingClientRect } from '@ray-js/ray';
 let _systemInfoResult = null;
 export const getSystemInfoResult = () => {
   if (_systemInfoResult) {
@@ -127,6 +127,35 @@ Component({
           this.render.clear();
         }
       }
+    },
+    scale: {
+      // 画布缩放比例
+      type: Number,
+      value: 1,
+      observer(newValue) {
+        if (newValue && this.render) {
+          this.render.updateScale(newValue);
+        }
+      }
+    },
+    isDragging: {
+      // 可拖动画布, 同时禁止绘制
+      type: Boolean,
+      value: false,
+      observer(newValue) {
+        if (this.render) {
+          this.render.setDragging(newValue);
+        }
+      }
+    },
+    drawData: {
+      // 初始绘制数据
+      type: null,
+      observer(newValue) {
+        if (newValue && this.render) {
+          this.render.drawData(newValue);
+        }
+      }
     }
   },
   data: {
@@ -137,7 +166,7 @@ Component({
     created() {
       this.render = new Render(this);
     },
-    ready() {
+    async ready() {
       let {
         canvasIdPrefix,
         width,
@@ -147,7 +176,9 @@ Component({
         pixelSizeX,
         pixelSizeY,
         pixelGap,
-        mode
+        mode,
+        scale,
+        isDragging
       } = this.data;
       width = getDeviceRealPx(width);
       height = getDeviceRealPx(height);
@@ -171,6 +202,8 @@ Component({
           realHeight: height
         });
       }
+      const ele = await getElementById(`${canvasIdPrefix}-container`);
+      const rect = await getBoundingClientRect(ele);
       this.render.initPanel({
         canvasIdPrefix: canvasIdPrefix,
         width: width,
@@ -183,8 +216,14 @@ Component({
         pixelGap: pixelGap,
         pixelShape: this.data.pixelShape,
         pixelColor: this.data.pixelColor,
-        penColor: this.data.penColor
+        penColor: this.data.penColor,
+        scale: scale,
+        isDragging: isDragging,
+        boxRect: rect
       });
+      if (this.data.drawData) {
+        this.render.drawData(this.data.drawData);
+      }
     }
   },
   methods: {

package/lib/components/index.less

@@ -0,0 +1,6 @@
+.pixelGraffiti_container {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/lib/components/index.rjs

@@ -14,7 +14,13 @@ export default Render({
     pixelShape,
     pixelColor,
     penColor,
+    scale,
+    isDragging,
+    boxRect,
   }) {
+    this.scale = scale || 1;
+    this.isDragging = isDragging || false;
+    this.boxRect = boxRect || null;
     let canvas = await getCanvasById(`${canvasIdPrefix}-sourceCanvas`);
 
     // 根据屏幕分辨率动态计算canvas尺寸
@@ -54,9 +60,23 @@ export default Render({
     // 记录触摸是否开始
     this.isTouchStarted = false;
 
+    this.gridData = {};
+
+    // 缩放拖动相关
+    this.offsetX = 0;
+    this.offsetY = 0;
+    this.lastX = 0;
+    this.lastY = 0;
+    // 计算缩放后格子尺寸
+    this.scalePixelSizeX = this.pixelSizeX * scale;
+    this.scalePixelSizeY = this.pixelSizeY * scale;
+    this.scalePixelGap = this.pixelGap * scale;
+
     // 初始化画布, 绘制像素点
     this.createPixel(pixelColor);
 
+    this.updateScale(scale);
+
     canvas.addEventListener('touchstart', this.handleTouchstart, false);
     canvas.addEventListener('touchmove', this.handleTouchmove, false);
     canvas.addEventListener('touchend', this.handleTouchend, false);
@@ -65,13 +85,32 @@ export default Render({
     ctx.imageSmoothingQuality = 'high'; // 高质量抗锯齿
   },
   handleTouchstart(e) {
-    const { canvas, pixelGap, pixelSizeX, pixelSizeY } = this;
+    const {
+      canvas,
+      pixelGap,
+      pixelSizeX,
+      pixelSizeY,
+      isDragging,
+      scalePixelSizeX,
+      scalePixelSizeY,
+      scalePixelGap,
+    } = this;
+    if (isDragging) {
+      const touch = e.changedTouches[0];
+      this.lastX = touch.pageX;
+      this.lastY = touch.pageY;
+      return;
+    }
     this.touchedSquaresSet.clear();
     this.isTouchStarted = true;
     const touch = e.changedTouches[0];
     const rect = canvas.getBoundingClientRect();
-    const x = Math.floor((touch.pageX - rect.left - pixelGap) / (pixelSizeX + pixelGap));
-    const y = Math.floor((touch.pageY - rect.top - pixelGap) / (pixelSizeY + pixelGap));
+    const x = Math.floor(
+      (touch.pageX - rect.left - scalePixelGap) / (scalePixelSizeX + scalePixelGap)
+    );
+    const y = Math.floor(
+      (touch.pageY - rect.top - scalePixelGap) / (scalePixelSizeY + scalePixelGap)
+    );
     const coordinate = `${x},${y}`;
     if (!this.touchedSquaresSet.has(coordinate)) {
       this.touchedSquaresSet.add(coordinate);
@@ -79,13 +118,58 @@ export default Render({
     }
   },
   handleTouchmove(e) {
-    const { canvas, pixelGap, pixelSizeX, pixelSizeY } = this;
+    const {
+      canvas,
+      pixelGap,
+      pixelSizeX,
+      pixelSizeY,
+      scalePixelGap,
+      scalePixelSizeX,
+      scalePixelSizeY,
+    } = this;
     e.preventDefault();
+    if (this.isDragging) {
+      const touch = e.changedTouches[0];
+      const rect = canvas.getBoundingClientRect();
+      const dx = touch.pageX - this.lastX;
+      const dy = touch.pageY - this.lastY;
+      this.offsetX += dx;
+      this.offsetY += dy;
+      this.lastX = touch.pageX;
+      this.lastY = touch.pageY;
+
+      // 获取容器大小
+      const boxWidth = this.boxRect?.width;
+      const boxHeight = this.boxRect?.height;
+
+      // 缩放后的画布内容尺寸
+      const displayWidth = rect.width;
+      const displayHeight = rect.height;
+      // 边界限制
+      if (displayWidth <= boxWidth) {
+        this.offsetX = 0;
+      } else {
+        const maxOffsetX = (displayWidth - boxWidth) / 2;
+        this.offsetX = Math.max(-maxOffsetX, Math.min(maxOffsetX, this.offsetX));
+      }
+      if (displayHeight <= boxHeight) {
+        this.offsetY = 0;
+      } else {
+        const maxOffsetY = (displayHeight - boxHeight) / 2;
+        this.offsetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, this.offsetY));
+      }
+      canvas.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`;
+      return;
+    }
     if (this.isTouchStarted) {
       const touch = e.changedTouches[0];
       const rect = canvas.getBoundingClientRect();
-      const x = Math.floor((touch.pageX - rect.left - pixelGap) / (pixelSizeX + pixelGap));
-      const y = Math.floor((touch.pageY - rect.top - pixelGap) / (pixelSizeY + pixelGap));
+      const x = Math.floor(
+        (touch.pageX - rect.left - scalePixelGap) / (scalePixelSizeX + scalePixelGap)
+      );
+      const y = Math.floor(
+        (touch.pageY - rect.top - scalePixelGap) / (scalePixelSizeY + scalePixelGap)
+      );
       const coordinate = `${x},${y}`;
       if (!this.touchedSquaresSet.has(coordinate)) {
         this.touchedSquaresSet.add(coordinate);
@@ -94,6 +178,9 @@ export default Render({
     }
   },
   handleTouchend() {
+    if (this.isDragging) {
+      return;
+    }
     this.isTouchStarted = false;
     const touchedSquares = [];
     for (const coordinateStr of this.touchedSquaresSet) {
@@ -143,6 +230,7 @@ export default Render({
       // 执行填充操作，将圆形内部填充为设定的颜色
       ctx.fill();
     }
+    this.gridData[`${x}_${y}`] = color;
   },
   // 改变画笔颜色
   updateColor(color) {
@@ -153,13 +241,43 @@ export default Render({
     this.penColor = color;
     this.createPixel(color);
   },
+  updateScale(scale) {
+    const { canvas } = this;
+    if (canvas && scale) {
+      canvas.style.transform = `scale(${scale})`;
+      this.scale = scale;
+      this.scalePixelSizeX = this.pixelSizeX * scale;
+      this.scalePixelSizeY = this.pixelSizeY * scale;
+      this.scalePixelGap = this.pixelGap * scale;
+    }
+  },
+  setDragging(isDragging) {
+    this.isDragging = isDragging;
+    const { canvas } = this;
+    if (canvas) {
+      if (isDragging) {
+        canvas.style.touchAction = 'none'; // 禁用默认的触摸行为，防止页面滚动
+      } else {
+        canvas.style.touchAction = 'auto'; // 恢复默认的触摸行为
+      }
+    }
+  },
   // 清除画布
   clear() {
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     this.createPixel(this.pixelColor);
   },
   save() {
+    const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+    console.log('render save imageData', imageData);
     const base64 = this.canvas.toDataURL('image/png');
-    this.callMethod('genImageData', { base64 });
+    this.callMethod('genImageData', { base64, gridData: this.gridData });
+  },
+
+  drawData(list) {
+    console.log('render drawData', list);
+    for (const item of list) {
+      this.fillPixel(item.x, item.y, item.color);
+    }
   },
 });

package/lib/components/index.tyml

@@ -1,6 +1,9 @@
-<canvas
-  canvasClassName
-  type="2d"
-  canvas-id="{{`${canvasIdPrefix}-sourceCanvas`}}"
-  style="width: {{realWidth}}px; height: {{realHeight}}px"
-/>
+<view class="pixelGraffiti_container" id="{{`${canvasIdPrefix}-container`}}" style="width: {{width}}px; height: {{height}}px">
+  <view class="smear-wrap">
+    <canvas
+    type="2d"
+    canvas-id="{{`${canvasIdPrefix}-sourceCanvas`}}"
+    style="width: {{realWidth}}px; height: {{realHeight}}px"
+    />
+  </view>
+</view>

package/lib/index.js

@@ -27,6 +27,9 @@ const RayGraffiti = props => {
     needStroke,
     saveTrigger,
     clearTrigger,
+    scale,
+    isDragging,
+    drawData,
     onStrokeChange,
     onSaveData
   } = props;
@@ -50,6 +53,9 @@ const RayGraffiti = props => {
     needStroke: needStroke,
     saveTrigger: saveTrigger,
     clearTrigger: clearTrigger,
+    scale: scale,
+    isDragging: isDragging,
+    drawData: drawData,
     bindstrokeChange: e => onStrokeChange(e.detail),
     bindsaveData: e => onSaveData(e.detail)
   }));

package/lib/props.d.ts

@@ -102,6 +102,28 @@ export interface IProps {
      * @default 0
      */
     clearTrigger?: number;
+    /**
+     * @description.zh 画布缩放比例
+     * @description.en Canvas scaling ratio
+     * @default 1
+     */
+    scale?: number;
+    /**
+     * @description.zh 禁止绘制, 画布超出时可拖动画布
+     * @description.en Draggable canvas, while disabling brush drawing
+     * @default false
+     */
+    isDragging?: boolean;
+    /**
+     * @description.zh 初始绘制数据
+     * @description.en Initial drawing data
+     * @default undefined
+     */
+    drawData?: Array<{
+        x: number;
+        y: number;
+        color: string;
+    }>;
     /**
      * @description.zh 画笔数据更新时触发, 返回画笔经过的x,y坐标路径数据
      * @description.en Triggered when the brush data is updated, returns the x,y coordinate path data of the brush.
@@ -109,8 +131,8 @@ export interface IProps {
      */
     onStrokeChange?: (data: IStrokeData) => void;
     /**
-     * @description.zh 保存数据时触发, 返回画布的base64数据
-     * @description.en Triggered when saving data, return canvas base64 data
+     * @description.zh 保存数据时触发, 返回画布的 base64 数据和格子颜色数据(gridData, key 为 格子坐标 "x_y"，value 为 颜色值)
+     * @description.en Triggered when saving data, return canvas base64 data and grid color data
      * @default () => null
      */
     onSaveData?: (data: IData) => void;
@@ -123,5 +145,6 @@ export type IStrokeData = {
 };
 export type IData = {
     base64: string;
+    gridData: Record<string, string>;
 };
 export declare const defaultProps: IProps;

package/lib/props.js

@@ -15,6 +15,8 @@ export const defaultProps = {
   needStroke: false,
   saveTrigger: 0,
   clearTrigger: 0,
+  scale: 1,
+  isDragging: false,
   onStrokeChange: () => null,
   onSaveData: () => null
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/graffiti",
-  "version": "1.0.0",
+  "version": "1.1.3",
   "description": "画布涂鸦组件",
   "main": "lib/index",
   "files": [
@@ -31,21 +31,18 @@
     "prepublishOnly": "yarn build",
     "release-it": "standard-version"
   },
-  "peerDependencies": {
-    "@ray-js/ray": "^1.4.9"
-  },
-  "dependencies": {
-    "clsx": "^1.2.1"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
-    "@ray-js/cli": "^1.4.9",
+    "@ray-js/cli": "^1.7.58",
+    "@ray-js/code-sandbox": "0.0.7-beta-10",
     "@ray-js/components-ty-lamp": "^2.0.2",
     "@ray-js/lamp-saturation-slider": "^1.1.7",
     "@ray-js/panel-sdk": "^1.13.0-storage.7",
-    "@ray-js/ray": "^1.4.9",
     "@vant/stylelint-config": "^1.4.2",
+    "@ray-js/ray": "^1.7.58",
+    "clsx": "^1.2.1",
     "core-js": "^3.19.1",
     "eslint-config-tuya-panel": "^0.4.2",
     "husky": "^1.2.0",
@@ -53,9 +50,6 @@
     "standard-version": "9.3.2",
     "stylelint": "^13.0.0"
   },
-  "resolutions": {
-    "@ray-js/builder-mp": "1.4.15"
-  },
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",