feat: canvas模式 #262

index.js

@@ -21522,6 +21522,7 @@
             toE(spm); // transform相对于自身
 
             if (ct && ct.length) {
+              inject.warn('CSS transform is deprecated');
               var first = ct[0]; // 特殊处理，抽取出来transform的ppt，视为tfo原点的透视
 
               if (first.k === PERSPECTIVE$1) {
@@ -23915,23 +23916,24 @@
     }, {
       key: "matrix",
       get: function get() {
-        this.__wasmNode;
+        var wn = this.__wasmNode;
+
+        if (wn) {
+          return new Float64Array(wasm$1.wasm.memory.buffer, wn.m_ptr(), 16);
+        }
 
         return this.__matrix;
       }
     }, {
       key: "matrixEvent",
       get: function get() {
-        var __domParent = this.__domParent,
-            matrix$1 = this.__matrix;
+        var wn = this.__wasmNode;
 
-        while (__domParent) {
-          matrix$1 = matrix.multiply(__domParent.__perspectiveMatrix, matrix$1);
-          matrix$1 = matrix.multiply(__domParent.__matrix, matrix$1);
-          __domParent = __domParent.__domParent;
+        if (wn) {
+          return new Float64Array(wasm$1.wasm.memory.buffer, wn.me_ptr(), 16);
         }
 
-        return matrix$1;
+        return this.__matrixEvent;
       }
     }, {
       key: "perspectiveMatrix",
@@ -38975,7 +38977,7 @@
     if (__wasmRoot) {
       var len = __structs.length;
       wasmOp = new Float64Array(wasm$1.wasm.memory.buffer, __wasmRoot.op_ptr(), len);
-      wasmVt = new Float64Array(wasm$1.wasm.memory.buffer, __wasmRoot.vt_ptr(), len * 16); // console.log(wasmVt);
+      wasmVt = new Float64Array(wasm$1.wasm.memory.buffer, __wasmRoot.vt_ptr(), len * 16);
     }
 
     var cx = width * 0.5,
@@ -39578,13 +39580,12 @@
         width = root.width,
         height = root.height,
         __wasmRoot = root.__wasmRoot;
-    var wasmMe, wasmOp;
+    var wasmOp, wasmMe;
 
     if (__wasmRoot) {
-      var len = __wasmRoot.refresh();
-
-      wasmMe = new Float32Array(wasm$1.wasm.memory.buffer, __wasmRoot.me_ptr(), len * 16);
-      wasmOp = new Float32Array(wasm$1.wasm.memory.buffer, __wasmRoot.op_ptr(), len);
+      var len = __structs.length;
+      wasmOp = new Float64Array(wasm$1.wasm.memory.buffer, __wasmRoot.op_ptr(), len);
+      wasmMe = new Float64Array(wasm$1.wasm.memory.buffer, __wasmRoot.me_ptr(), len * 16);
     }
 
     var mergeList = [];
@@ -39892,8 +39893,7 @@
 
           if (opacity > 0) {
             if (wasmOp) {
-              var _idx2 = _i11 * 16; // console.log(i, idx, me[idx], me[idx + 1], me[idx + 4], me[idx + 5], me[idx + 12], me[idx + 13])
-
+              var _idx2 = _i11 * 16;
 
               ctx.setTransform(wasmMe[_idx2], wasmMe[_idx2 + 1], wasmMe[_idx2 + 4], wasmMe[_idx2 + 5], wasmMe[_idx2 + 12], wasmMe[_idx2 + 13]);
             } else {

src/node/Xom.js

@@ -23,7 +23,7 @@ import font from '../style/font';
 import bs from '../style/bs';
 import mbm from '../style/mbm';
 import reset from '../style/reset';
-import wasm from '../wasm';
+import wasm from '../wasm/index';
 
 const { svgPolygon } = painter;
 const { CANVAS, SVG, WEBGL } = mode;
@@ -1210,6 +1210,7 @@ class Xom extends Node {
         toE(spm);
         // transform相对于自身
         if(ct && ct.length) {
+          inject.warn('CSS transform is deprecated');
           let first = ct[0];
           // 特殊处理，抽取出来transform的ppt，视为tfo原点的透视
           if(first.k === PERSPECTIVE) {

src/refresh/struct.js

@@ -2,7 +2,6 @@ import CanvasCache from './CanvasCache';
 import offscreen from './offscreen';
 import mode from './mode';
 import Page from './Page';
-import Text from '../node/Text';
 import Dom from '../node/Dom';
 import Img from '../node/Img';
 import Geom from '../node/geom/Geom';
@@ -2279,7 +2278,6 @@ function renderWebgl(renderMode, gl, root, isFirst, rlv) {
     let len = __structs.length;
     wasmOp = new Float64Array(wasm.wasm.memory.buffer, __wasmRoot.op_ptr(), len);
     wasmVt = new Float64Array(wasm.wasm.memory.buffer, __wasmRoot.vt_ptr(), len * 16);
-    // console.log(wasmVt);
   }
   let cx = width * 0.5, cy = height * 0.5;
   // 栈代替递归，存父节点的matrix/opacity，matrix为E时存null省略计算
@@ -2817,11 +2815,11 @@ function renderWebgl(renderMode, gl, root, isFirst, rlv) {
 
 function renderCanvas(renderMode, ctx, root, isFirst, rlv) {
   let { __structs, width, height, __wasmRoot } = root;
-  let wasmMe, wasmOp;
+  let wasmOp, wasmMe;
   if(__wasmRoot) {
-    let len = __wasmRoot.refresh();
-    wasmMe = new Float32Array(wasm.wasm.memory.buffer, __wasmRoot.me_ptr(), len * 16);
-    wasmOp = new Float32Array(wasm.wasm.memory.buffer, __wasmRoot.op_ptr(), len);
+    let len = __structs.length;
+    wasmOp = new Float64Array(wasm.wasm.memory.buffer, __wasmRoot.op_ptr(), len);
+    wasmMe = new Float64Array(wasm.wasm.memory.buffer, __wasmRoot.me_ptr(), len * 16);
   }
   let mergeList = [];
   /**
@@ -3053,7 +3051,6 @@ function renderCanvas(renderMode, ctx, root, isFirst, rlv) {
         if(opacity > 0) {
           if(wasmOp) {
             let idx = i * 16;
-            // console.log(i, idx, me[idx], me[idx + 1], me[idx + 4], me[idx + 5], me[idx + 12], me[idx + 13])
             ctx.setTransform(wasmMe[idx], wasmMe[idx + 1], wasmMe[idx + 4], wasmMe[idx + 5], wasmMe[idx + 12], wasmMe[idx + 13]);
           }
           else {

test/group1/wasm-canvas/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0"/>
+  <title>test</title>
+</head>
+<body>
+<div id="test"></div>
+<input id="base64" type="text" value=""/>
+<script src="../../../index.js"></script>
+<script src="script.js"></script>
+</body>
+</html>

test/group1/wasm-canvas/script.jsx

@@ -0,0 +1,15 @@
+karas.wasm.init('../../../karas_bg.wasm', function() {
+  karas.render(
+    <canvas width="360" height="360">
+      <div style={{
+        width: 50,
+        height: 50,
+        background: '#F00',
+        translateX: 50,
+      }}/>
+    </canvas>,
+    '#test'
+  );
+  let input = document.querySelector('#base64');
+  input.value = document.querySelector('canvas').toDataURL();
+});

test/group1/wasm-webgl/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0"/>
+  <title>test</title>
+</head>
+<body>
+<div id="test"></div>
+<input id="base64" type="text" value=""/>
+<script src="../../../index.js"></script>
+<script src="script.js"></script>
+</body>
+</html>

test/group1/wasm-webgl/script.jsx

@@ -0,0 +1,15 @@
+karas.wasm.init('../../../karas_bg.wasm', function() {
+  karas.render(
+    <webgl width="360" height="360">
+      <div style={{
+        width: 50,
+        height: 50,
+        background: '#F00',
+        translateX: 50,
+      }}/>
+    </webgl>,
+    '#test'
+  );
+  let input = document.querySelector('#base64');
+  input.value = document.querySelector('canvas').toDataURL();
+});