vislite 0.1.0 → 0.2.0-alpha.7

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,29 @@
+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[]
+
+}

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: {
@@ -58,19 +75,25 @@ export default {
     },
     touchstart: {
       type: Function,
-      default: () => {},
+      default: () => { },
     },
+    cover: {
+      type: Boolean,
+      default: true
+    }
   },
   methods: {
     fetch() {
       // #ifdef MP-WEIXIN
       let painter = uni.createCanvasContext("painter", this);
       let region = uni.createCanvasContext("region", this);
+      let painterid = "painter";
       let regionid = "region";
       // #endif
       // #ifndef MP-WEIXIN
       let painter = uni.createCanvasContext("painter-" + this.uniqueid, this);
       let region = uni.createCanvasContext("region-" + this.uniqueid, this);
+      let painterid = "painter-" + this.uniqueid;
       let regionid = "region-" + this.uniqueid;
       // #endif
 
@@ -114,34 +137,76 @@ 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) {
       let doRun = (x, y) => {
         this.help.instance.getRegion(x, y).then((regionName) => {
-          doback(regionName);
+          // 兼容旧语法
+          if (doback) doback(regionName);
+
+          this.$emit("dotouchstart", {
+            name: regionName,
+            x: x,
+            y: y,
+          });
         });
       };
 
-      // #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;
-          doRun(x, y);
-        });
-      // #endif
-      // #ifndef MP-ALIPAY
-      let x = event.touches[0].x;
-      let y = event.touches[0].y;
-      doRun(x, y);
-      // #endif
+      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;
+            doRun(x, y);
+          });
+        // #endif
+        // #ifndef MP-ALIPAY
+        let x = event.touches[0].x;
+        let y = event.touches[0].y;
+        doRun(x, y);
+        // #endif
+
+      } else {
+
+        uni.createSelectorQuery().in(this).select('.view-' + this.uniqueid).boundingClientRect(data => {
+          doRun(event.touches[0].pageX - data.left, event.touches[0].pageY - data.top);
+        }).exec()
+
+      }
     },
     doitstart(event) {
       this.doit(event, this.touchstart);
@@ -150,10 +215,19 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
 /* 辅助的区域不应该可以看见 */
 .region {
   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[]
-
-}