vislite 0.1.1 → 0.2.0-alpha.8

package/types/SVGConfig.d.ts

@@ -0,0 +1,59 @@
+export default interface SVGConfigType {
+
+    /**
+     * 填充色或图案，默认"#000"
+     */
+    fillStyle?: string
+
+    /**
+     * 轮廓色或图案，默认"#000"
+     */
+    strokeStyle?: string
+
+    /**
+     * 线条宽度，默认1(单位px)
+     */
+    lineWidth?: number
+
+    /**
+     * 文字水平对齐方式，默认"left"左对齐（还有"center"居中和"right"右对齐）
+     */
+    textAlign?: string
+
+    /**
+     * 文字垂直对齐方式，默认"middle"垂直居中（还有"top"上对齐和"bottom"下对齐）
+     */
+    textBaseline?: string
+
+    /**
+     * 设置线条虚线，默认为[]表示使用实线绘制
+     *
+     * 值应该是一个数组，格式：[实线长，虚线长，实线长 ...]，数组长度任意，会自动循环
+     */
+    lineDash?: Array<number>
+
+    /**
+     * 文字大小，默认16
+     */
+    "fontSize"?: number
+    "font-size"?: number // 向下兼容
+
+    /**
+     * 字体，默认"sans-serif"
+     */
+    "fontFamily"?: string
+    "font-family"?: string // 向下兼容
+
+    /**
+     * 圆弧开始端闭合方式，默认"butt"直线闭合（还有"round"圆帽闭合,"-round"反圆帽闭合）
+     */
+    "arcStartCap"?: string
+    "arc-start-cap"?: string // 向下兼容
+
+    /**
+     * 圆弧结束端闭合方式，默认"butt"直线闭合（还有"round"圆帽闭合,"-round"反圆帽闭合）
+     */
+    "arcEndCap"?: string
+    "arc-end-cap"?: string // 向下兼容
+
+}

package/types/Scene3D.d.ts

@@ -0,0 +1,7 @@
+import Object3D from './Object3D'
+import Matrix4Type from './Matrix4'
+
+export default interface Scene3D {
+    children: Object3D[]
+    matrix: Matrix4Type
+}        

package/types/WebGL.d.ts

@@ -0,0 +1,39 @@
+import Object3DType from './Object3D'
+import Matrix4Type from './Matrix4'
+
+export default interface WebGLType {
+
+    matrix(initMatrix4?: number[]): Matrix4Type
+
+    /**
+     * 使用模型数据绘制
+     * @param object3D 记录着的模型数据
+     */
+    render(object3D: Object3DType): void
+
+    /**
+     * 重新绘制
+     */
+    review(): this
+
+    /**
+     * 返回变换矩阵
+     */
+    getMatrix(): Matrix4Type
+
+    /**
+     * 返回所有的Object3D内容
+     */
+    getObject3D(): Object3DType[]
+
+    /**
+     * 设置区域
+     */
+    setRegion(regionName: string | number): this
+
+    /**
+     * 获取区域
+     */
+    getRegion(x: number, y: number): Promise<string>
+
+}

package/types/animation.d.ts

@@ -1,7 +1,7 @@
-interface animationFun {
-    (deep: number): void
-}
-
-export default interface animationType {
-    (doback: animationFun, duration?: number, callback?: animationFun): Function
+interface animationFun {
+    (deep: number): void
+}
+
+export default interface animationType {
+    (doback: animationFun, duration?: number, callback?: animationFun): Function
 }

package/types/getLoopColors.d.ts

@@ -1,3 +1,3 @@
-export default interface getLoopColorsType {
-    (num: number, alpha?: number): string[]
+export default interface getLoopColorsType {
+    (num: number, alpha?: number): string[]
 }

package/types/index.d.ts

@@ -1,58 +1,102 @@
-import Matrix4Type from './Matrix4'
-import CanvasType from './Canvas'
-import SVGType from './SVG'
-import EoapType from './Eoap'
-import HermiteType from './Hermite'
 import CardinalType from './Cardinal'
+import HermiteType from './Hermite'
+
+import Matrix4Type from './Matrix4'
 import rotateType from './rotate'
-import animationType from './animation'
+
 import getLoopColorsType from './getLoopColors'
+import animationType from './animation'
 import rulerType from './ruler'
 
-interface NewCanvasType extends CanvasType {
-    new(el: HTMLElement | null): this
-}
+import SVGType from './SVG'
+import CanvasType from './Canvas'
+import WebGLType from './WebGL'
+
+import MapType from './Map'
 
+import viewHandlerType from './viewHandler'
+
+// 插值
 interface NewCardinalType extends CardinalType {
     new(t?: number): this
 }
-
-interface NewEoapType extends EoapType {
-    new(scale?: number, center?: number[]): this
-}
-
 interface NewHermiteType extends HermiteType {
-    new(u: number): this
+    new(u?: number): this
 }
 
+// 变换
 interface NewMatrix4Type extends Matrix4Type {
     new(initMatrix4?: number[]): this
 }
 
+// 画笔
 interface NewSVGType extends SVGType {
     new(el: HTMLElement | null): this
 }
+interface NewCanvasType extends CanvasType {
+    new(el: HTMLElement | null): this
+}
+interface NewWebGLType extends WebGLType {
+    new(el: HTMLElement | null): this
+}
+
+// 投影
+interface NewEoapType extends MapType {
+    new(scale?: number, center?: number[]): this
+}
+interface NewMercatorType extends MapType {
+    new(scale?: number, center?: number[]): this
+}
 
 export default class VISLite {
+
+    // 插值
+    static Cardinal: NewCardinalType
+    static Hermite: NewHermiteType
+
+    // 变换
     static Matrix4: NewMatrix4Type
-    static Canvas: NewCanvasType
-    static SVG: NewSVGType
-    static Eoap: NewEoapType
     static rotate: rotateType
-    static Hermite: NewHermiteType
-    static Cardinal: NewCardinalType
+
+    // 工具
     static getLoopColors: getLoopColorsType
     static animation: animationType
     static ruler: rulerType
+
+    // 画笔
+    static SVG: NewSVGType
+    static Canvas: NewCanvasType
+    static WebGL: NewWebGLType
+
+    // 投影
+    static Eoap: NewEoapType
+    static Mercator: NewMercatorType
+
+    // 辅助
+    static viewHandler: viewHandlerType
 }
 
+// 插值
+export let Cardinal: NewCardinalType
+export let Hermite: NewHermiteType
+
+// 变换
 export let Matrix4: NewMatrix4Type
-export let Canvas: NewCanvasType
-export let SVG: NewSVGType
-export let Eoap: NewEoapType
 export let rotate: rotateType
-export let Hermite: NewHermiteType
-export let Cardinal: NewCardinalType
+
+// 工具
 export let getLoopColors: getLoopColorsType
 export let animation: animationType
-export let ruler: rulerType
+export let ruler: rulerType
+
+// 画笔
+export let SVG: NewSVGType
+export let Canvas: NewCanvasType
+export let WebGL: NewWebGLType
+
+// 投影
+export let Eoap: NewEoapType
+export let Mercator: NewMercatorType
+
+// 辅助
+export let viewHandler: viewHandlerType

package/types/rotate.d.ts

@@ -1,3 +1,3 @@
-export default interface rotateType {
-    (cx: number, cy: number, deg: number, x: number, y: number): number[]
+export default interface rotateType {
+    (cx: number, cy: number, deg: number, x: number, y: number): number[]
 }

package/types/ruler.d.ts

@@ -1,3 +1,3 @@
-export default interface rulerType {
-    (maxValue: number, minValue: number, num: number): number[]
+export default interface rulerType {
+    (maxValue: number, minValue: number, num: number): number[]
 }

package/types/viewHandler.d.ts

@@ -0,0 +1,13 @@
+export interface paramsType {
+    type: string
+    value: number,
+    normal: number[]
+}
+
+export interface callbackFun {
+    (params: paramsType): void
+}
+
+export default interface viewHandlerType {
+    (callback: callbackFun): void
+}

package/uni-app/ui-canvas.vue

@@ -1,7 +1,15 @@
 <template>
-  <view>
+  <view :class="cover || isH5 ? 'cover-view' : 'normal-view'">
+    <view :class="'view-img view-' + uniqueid" @touchstart="doitstart">
+      <image
+        :style="{ width: width + 'px', height: height + 'px' }"
+        :src="viewImg"
+      ></image>
+    </view>
+
     <!-- #ifdef MP-ALIPAY -->
     <canvas
+      class="painter"
       :id="'painter-' + uniqueid"
       @touchstart="doitstart"
       :style="{ width: width + 'px', height: height + 'px' }"
@@ -14,6 +22,7 @@
     <!-- #endif -->
     <!-- #ifdef MP-WEIXIN -->
     <canvas
+      class="painter"
       canvas-id="painter"
       @touchstart="doitstart"
       :style="{ width: width + 'px', height: height + 'px' }"
@@ -26,6 +35,7 @@
     <!-- #endif -->
     <!-- #ifndef MP-WEIXIN||MP-ALIPAY -->
     <canvas
+      class="painter"
       :canvas-id="'painter-' + uniqueid"
       @touchstart="doitstart"
       :style="{ width: width + 'px', height: height + 'px' }"
@@ -45,6 +55,13 @@ export default {
     return {
       uniqueid: (Math.random() * 10000).toFixed(0),
       help: {},
+      viewImg: "",
+      // #ifdef H5
+      isH5: true,
+      // #endif
+      // #ifndef H5
+      isH5: false,
+      // #endif
     };
   },
   props: {
@@ -60,18 +77,25 @@ export default {
       type: Function,
       default: () => {},
     },
+    cover: {
+      type: Boolean,
+      default: true,
+    },
   },
   methods: {
     fetch() {
+      let painter, region, painterid, regionid;
       // #ifdef MP-WEIXIN
-      let painter = uni.createCanvasContext("painter", this);
-      let region = uni.createCanvasContext("region", this);
-      let regionid = "region";
+      painter = uni.createCanvasContext("painter", this);
+      region = uni.createCanvasContext("region", this);
+      painterid = "painter";
+      regionid = "region";
       // #endif
       // #ifndef MP-WEIXIN
-      let painter = uni.createCanvasContext("painter-" + this.uniqueid, this);
-      let region = uni.createCanvasContext("region-" + this.uniqueid, this);
-      let regionid = "region-" + this.uniqueid;
+      painter = uni.createCanvasContext("painter-" + this.uniqueid, this);
+      region = uni.createCanvasContext("region-" + this.uniqueid, this);
+      painterid = "painter-" + this.uniqueid;
+      regionid = "region-" + this.uniqueid;
       // #endif
 
       let _this = this;
@@ -83,6 +107,9 @@ export default {
         },
         {
           getContext() {
+            // #ifdef MP-ALIPAY
+            let getImageData = region.getImageData;
+            // #endif
             region.getImageData = (x, y, width, height) => {
               return new Promise((resolve, reject) => {
                 let options = {
@@ -100,7 +127,7 @@ export default {
                 };
 
                 // #ifdef MP-ALIPAY
-                region.getImageData(options, _this);
+                getImageData(options, _this);
                 // #endif
                 // #ifndef MP-ALIPAY
                 uni.canvasGetImageData(options, _this);
@@ -114,27 +141,69 @@ export default {
       this.help.instance.draw = () => {
         painter.draw();
         region.draw();
+
+        // 如果不使用原生渲染
+        if (!this.cover && !this.isH5) {
+          uni.canvasToTempFilePath(
+            {
+              canvasId: painterid,
+              success: (e) => {
+                this.viewImg = e.tempFilePath;
+              },
+            },
+            this
+          );
+        }
       };
       return new Promise((resolve, reject) => {
+        this.help.instance.toDataURL = () => {
+          return new Promise((resolveUrl) => {
+            uni.canvasToTempFilePath(
+              {
+                canvasId: painterid,
+                success: function (e) {
+                  resolveUrl(e.tempFilePath);
+                },
+              },
+              this
+            );
+          });
+        };
+
         resolve(this.help.instance);
       });
     },
     doit(event, doback) {
-      if(doback){
-        let doRun = (x, y) => {
-          this.help.instance.getRegion(x, y).then((regionName) => {
-            doback(regionName);
+      let doRun = (x, y) => {
+        this.help.instance.getRegion(x, y).then((regionName) => {
+          // 兼容旧语法
+          if (typeof doback == "function") doback(regionName);
+
+          this.$emit("dotouchstart", {
+            name: regionName,
+            x: x,
+            y: y,
           });
-        };
+        });
+      };
 
+      if (this.cover || this.isH5) {
         // #ifdef MP-ALIPAY
         uni
           .createSelectorQuery()
           .selectViewport()
           .scrollOffset()
           .exec((ret) => {
-            let x = event.touches[0].x + ret[0].scrollLeft;
-            let y = event.touches[0].y + ret[0].scrollTop;
+            let x, y;
+            // #ifdef MP-ALIPAY
+            x = event.touches[0].x;
+            y = event.touches[0].y;
+            // #endif
+            // #ifndef MP-ALIPAY
+            x = event.touches[0].x + ret[0].scrollLeft;
+            y = event.touches[0].y + ret[0].scrollTop;
+            // #endif
+
             doRun(x, y);
           });
         // #endif
@@ -143,6 +212,24 @@ export default {
         let y = event.touches[0].y;
         doRun(x, y);
         // #endif
+      } else {
+        uni
+          .createSelectorQuery()
+          .selectViewport()
+          .scrollOffset()
+          .exec((ret) => {
+            uni
+              .createSelectorQuery()
+              .in(this)
+              .select(".view-" + this.uniqueid)
+              .boundingClientRect((data) => {
+                doRun(
+                  event.touches[0].pageX - data.left - ret[0].scrollLeft,
+                  event.touches[0].pageY - data.top - ret[0].scrollTop
+                );
+              })
+              .exec();
+          });
       }
     },
     doitstart(event) {
@@ -158,4 +245,13 @@ export default {
   position: fixed;
   left: 50000px;
 }
+
+.cover-view .view-img {
+  display: none;
+}
+
+.normal-view .painter {
+  position: fixed;
+  left: 50000px;
+}
 </style>

package/types/Eoap.d.ts

@@ -1,10 +0,0 @@
-export default interface EoapType {
-
-    /**
-     * 返回该点的绘图坐标（特别需要注意，计算出来的位置是偏离中心点的距离）
-     * @param longitude 经纬度
-     * @param latitude 
-     */
-    use(longitude: number, latitude: number): number[]
-
-}