feat: 添加装换图片方法

l-x-f · Sep 15, 2021 · c1502b7 · c1502b7
1 parent 928a123
commit c1502b7
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 11 deletions.
diff --git a/dist/index.esm.js b/dist/index.esm.js
diff --git a/dist/index.js b/dist/index.js
@@ -19199,6 +19199,9 @@
 
     function createCanvas(element) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+      var _a;
+
       var el = element instanceof HTMLElement ? element : document.getElementById(element);
       var ratio = window.devicePixelRatio;
       var height = window.innerHeight * ratio;
@@ -19208,7 +19211,9 @@
         devicePixelRatio: ratio,
         width: width,
         height: height
-      }, options));
+      }, options)); // 画布默认设置为黑色
+
+      (_a = Canvas === null || Canvas === void 0 ? void 0 : Canvas.painter) === null || _a === void 0 ? void 0 : _a.setBackgroundColor('#000');
       return Canvas;
     }
     /**
@@ -19366,7 +19371,7 @@
           var shapes = data === null || data === void 0 ? void 0 : data.map(function (item) {
             return generateShape(item);
           });
-          var group = new Group();
+          var group = createGroup();
 
           if (id) {
             group.id = id;

diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auto-drawing",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "auto-drawing based zrender",
   "types": "dist/index.d.ts",
   "module": "dist/index.esm.js",
@@ -63,9 +63,8 @@
     }
   },
   "lint-staged": {
-    "src/**/*.{js,vue}": [
-      "npm run lint",
-      "git add"
+    "src/**/*.{js,ts}": [
+      "npm run lint"
     ]
   }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -77,6 +77,8 @@ export function createCanvas(
     height: height,
     ...options
   } as ZRenderInitOptions)
+  // 画布默认设置为黑色
+  Canvas?.painter?.setBackgroundColor('#000')
   return Canvas
 }
 
@@ -180,7 +182,7 @@ export function generateShape(item: ShapeCoreType, _index?: number): AllShape {
       break
     case 'group':
       const shapes = data?.map((item: any) => generateShape(item))
-      const group = new Group()
+      const group = createGroup()
       if (id) {
         group.id = id as number
       }

diff --git a/tests/toImage.html b/tests/toImage.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script src="../dist/index.js"></script>
+  </head>
+  <body>
+    <div id="div"></div>
+
+    <script>
+      const { createCanvas, createGroup, renderCanvas } = AutoDrawing
+      const zr = createCanvas('div')
+      const gp = createGroup()
+      const img = new Image()
+      img.width = 600
+      img.height = 600
+      img.src = './img.jpg'
+
+      const data = [
+        {
+          type: 'group',
+          data: [
+            {
+              type: 'line',
+              zlevel: 1,
+              x1: 32,
+              y1: 62,
+              x2: 168,
+              y2: 62,
+              stroke: '#f8f8b8'
+            },
+            {
+              type: 'line',
+              zlevel: 1,
+              x1: 168,
+              y1: 62,
+              x2: 168,
+              y2: 139,
+              stroke: '#f8f8b8'
+            },
+            {
+              type: 'line',
+              zlevel: 1,
+              x1: 168,
+              y1: 139,
+              x2: 32,
+              y2: 139,
+              stroke: '#f8f8b8'
+            },
+            {
+              type: 'line',
+              zlevel: 1,
+              x1: 32,
+              y1: 139,
+              x2: 32,
+              y2: 62,
+              stroke: '#f8f8b8'
+            }
+          ]
+        },
+        {
+          type: 'rect',
+          zlevel: 0,
+          x: 26,
+          y: 76,
+          width: 40,
+          height: 50,
+          fill: '#ff8041',
+          stroke: '#ff8041'
+        },
+        {
+          type: 'rect',
+          zlevel: 0,
+          x: 135,
+          y: 76,
+          width: 40,
+          height: 50,
+          fill: '#00ff01',
+          stroke: '#00ff01'
+        },
+        {
+          type: 'line',
+          zlevel: 0,
+          x1: 96,
+          y1: 100,
+          x2: 104,
+          y2: 100,
+          stroke: '#f8f9b7'
+        },
+        {
+          type: 'line',
+          zlevel: 0,
+          x1: 100,
+          y1: 96,
+          x2: 100,
+          y2: 104,
+          stroke: '#f8f9b7'
+        },
+        {
+          type: 'sector',
+          cx: 150,
+          cy: 150,
+          r: 100,
+          r0: 0,
+          startAngle: 0,
+          endAngle: 90,
+          fill: 'yellow',
+          clockwise: true
+        },
+        {
+          type: 'arc',
+          cx: 300,
+          cy: 150,
+          r: 100,
+          startAngle: 0,
+          endAngle: 90,
+          fill: 'green',
+          clockwise: true
+        },
+        {
+          type: 'circle',
+          cx: 350,
+          cy: 350,
+          r: 50,
+          fill: 'green'
+        },
+        {
+          type: 'polygon',
+          points: [
+            [350, 0],
+            [500, 0],
+            [350, 100]
+          ],
+          fill: 'red',
+          stroke: 'none'
+        },
+        {
+          type: 'text',
+          x: 600,
+          y: 600,
+          text: '你好,我是文字',
+          fontSize: 50,
+          fontWeight: 400
+        },
+        {
+          type: 'image',
+          x: 800,
+          y: 100,
+          width: 160,
+          height: 160,
+          image: img
+        }
+      ]
+      renderCanvas(zr, gp, data, {
+        scale: true,
+        translate: true
+      })
+
+      zr.painter.getRenderedCanvas().toBlob(blob => {
+        console.log(blob)
+        const imgUrl = URL.createObjectURL(blob)
+        console.log(imgUrl)
+      })
+    </script>
+  </body>
+</html>