vislite 0.5.2 → 0.6.0-alpha.2

package/uni-app/ui-canvas.vue

@@ -1,226 +1,259 @@
 <template>
-    <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' }"></canvas>
-      <canvas v-if="region" class="region" :id="'region-' + uniqueid"
-        :style="{ width: width + 'px', height: height + 'px' }"></canvas>
-      <!-- #endif -->
-      <!-- #ifdef MP-WEIXIN -->
-      <canvas class="painter" canvas-id="painter" @touchstart="doitstart"
-        :style="{ width: width + 'px', height: height + 'px' }"></canvas>
-      <canvas v-if="region" class="region" canvas-id="region"
-        :style="{ width: width + 'px', height: height + 'px' }"></canvas>
-      <!-- #endif -->
-      <!-- #ifndef MP-WEIXIN||MP-ALIPAY -->
-      <canvas class="painter" :canvas-id="'painter-' + uniqueid" @touchstart="doitstart"
-        :style="{ width: width + 'px', height: height + 'px' }"></canvas>
-      <canvas v-if="region" class="region" :canvas-id="'region-' + uniqueid"
-        :style="{ width: width + 'px', height: height + 'px' }"></canvas>
-      <!-- #endif -->
+  <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>
-  </template>
+
+    <!-- #ifdef MP-ALIPAY -->
+    <canvas
+      class="painter"
+      :id="'painter-' + uniqueid"
+      @touchstart="doitstart"
+      :style="{ width: width + 'px', height: height + 'px' }"
+    ></canvas>
+    <canvas
+      v-if="region"
+      class="region"
+      :id="'region-' + uniqueid"
+      :style="{ width: width + 'px', height: height + 'px' }"
+    ></canvas>
+    <!-- #endif -->
+    <!-- #ifdef MP-WEIXIN -->
+    <canvas
+      class="painter"
+      canvas-id="painter"
+      @touchstart="doitstart"
+      :style="{ width: width + 'px', height: height + 'px' }"
+    ></canvas>
+    <canvas
+      v-if="region"
+      class="region"
+      canvas-id="region"
+      :style="{ width: width + 'px', height: height + 'px' }"
+    ></canvas>
+    <!-- #endif -->
+    <!-- #ifndef MP-WEIXIN||MP-ALIPAY -->
+    <canvas
+      class="painter"
+      :canvas-id="'painter-' + uniqueid"
+      @touchstart="doitstart"
+      :style="{ width: width + 'px', height: height + 'px' }"
+    ></canvas>
+    <canvas
+      v-if="region"
+      class="region"
+      :canvas-id="'region-' + uniqueid"
+      :style="{ width: width + 'px', height: height + 'px' }"
+    ></canvas>
+    <!-- #endif -->
+  </view>
+</template>
   <script>
-  import OralCanvas from "../lib/OralCanvas/index.es.js";
-  export default {
-    data() {
-      return {
-        uniqueid: (Math.random() * 10000).toFixed(0),
-        help: {},
-        viewImg: "",
-        // #ifdef H5
-        isH5: true,
-        // #endif
-        // #ifndef H5
-        isH5: false,
-        // #endif
-      };
+import OralCanvas from "../lib/OralCanvas/index.es.js";
+export default {
+  data() {
+    return {
+      uniqueid: (Math.random() * 10000).toFixed(0),
+      help: {},
+      viewImg: "",
+      // #ifdef H5
+      isH5: true,
+      // #endif
+      // #ifndef H5
+      isH5: false,
+      // #endif
+    };
+  },
+  props: {
+    width: {
+      type: Number,
+      default: 300,
+    },
+    height: {
+      type: Number,
+      default: 150,
+    },
+    touchstart: {
+      type: Function,
+      default: () => {},
+    },
+    cover: {
+      type: Boolean,
+      default: true,
     },
-    props: {
-      width: {
-        type: Number,
-        default: 300,
-      },
-      height: {
-        type: Number,
-        default: 150,
-      },
-      touchstart: {
-        type: Function,
-        default: () => { },
-      },
-      cover: {
-        type: Boolean,
-        default: true,
-      },
-      region: {
-        type: Boolean,
-        default: true,
-      },
+    region: {
+      type: Boolean,
+      default: true,
     },
-    methods: {
-      fetch() {
-        let painter, region, painterid, regionid;
-        // #ifdef MP-WEIXIN
-        painter = uni.createCanvasContext("painter", this);
-        if (this.region) region = uni.createCanvasContext("region", this);
-        painterid = "painter";
-        regionid = "region";
-        // #endif
-        // #ifndef MP-WEIXIN
-        painter = uni.createCanvasContext("painter-" + this.uniqueid, this);
-        if (this.region) region = uni.createCanvasContext("region-" + this.uniqueid, this);
-        painterid = "painter-" + this.uniqueid;
-        regionid = "region-" + this.uniqueid;
-        // #endif
+  },
+  methods: {
+    fetch() {
+      let painter, region, painterid, regionid;
+      // #ifdef MP-WEIXIN
+      painter = uni.createCanvasContext("painter", this);
+      if (this.region) region = uni.createCanvasContext("region", this);
+      painterid = "painter";
+      regionid = "region";
+      // #endif
+      // #ifndef MP-WEIXIN
+      painter = uni.createCanvasContext("painter-" + this.uniqueid, this);
+      if (this.region)
+        region = uni.createCanvasContext("region-" + this.uniqueid, this);
+      painterid = "painter-" + this.uniqueid;
+      regionid = "region-" + this.uniqueid;
+      // #endif
 
-        let _this = this;
-        this.help.instance = new OralCanvas(
-          {
-            getContext() {
-              return painter;
-            },
+      let _this = this;
+      this.help.instance = new OralCanvas(
+        {
+          getContext() {
+            return painter;
           },
-          _this.region ? {
-            getContext() {
-              // #ifdef MP-ALIPAY
-              let getImageData = region.getImageData;
-              // #endif
-              region.getImageData = (x, y, width, height) => {
-                return new Promise((resolve, reject) => {
-                  let options = {
-                    x,
-                    y,
-                    width,
-                    height,
-                    canvasId: regionid,
-                    success: function success(res) {
-                      resolve(res.data);
-                    },
-                    fail: function fail(error) {
-                      reject(error);
-                    },
-                  };
-
-                  // #ifdef MP-ALIPAY
-                  getImageData(options);
-                  // #endif
-                  // #ifndef MP-ALIPAY
-                  uni.canvasGetImageData(options, _this);
-                  // #endif
-                });
-              };
-              return region;
-            },
-          } : null
-        );
-        this.help.instance.draw = (reserve = false, callback = () => { }) => {
-          painter.draw(reserve, () => {
-
-            // 如果不使用原生渲染
-            if (!this.cover && !this.isH5) {
-              uni.canvasToTempFilePath(
-                {
-                  canvasId: painterid,
-                  success: (e) => {
-                    this.viewImg = e.tempFilePath;
-                    if (_this.region) region.draw(reserve);
-                    callback();
-                  },
-                }
-                // #ifndef MP-ALIPAY
-                , this
+        },
+        _this.region
+          ? {
+              getContext() {
+                // #ifdef MP-ALIPAY
+                let getImageData = region.getImageData;
                 // #endif
-              );
-            } else {
-              if (_this.region) region.draw(reserve);
-              callback();
+                region.getImageData = (x, y, width, height) => {
+                  return new Promise((resolve, reject) => {
+                    let options = {
+                      x,
+                      y,
+                      width,
+                      height,
+                      canvasId: regionid,
+                      success: function success(res) {
+                        resolve(res.data);
+                      },
+                      fail: function fail(error) {
+                        reject(error);
+                      },
+                    };
+
+                    // #ifdef MP-ALIPAY
+                    getImageData(options);
+                    // #endif
+                    // #ifndef MP-ALIPAY
+                    uni.canvasGetImageData(options, _this);
+                    // #endif
+                  });
+                };
+                return region;
+              },
             }
+          : null
+      );
+      this.help.instance.draw = (reserve = false, callback = () => {}) => {
+        painter.draw(reserve, () => {
+          // 如果不使用原生渲染
+          if (!this.cover && !this.isH5) {
+            uni.canvasToTempFilePath(
+              {
+                canvasId: painterid,
+                success: (e) => {
+                  this.viewImg = e.tempFilePath;
+                  if (_this.region) region.draw(reserve);
+                  callback();
+                },
+              },
+              // #ifndef MP-ALIPAY
+              this
+              // #endif
+            );
+          } else {
+            if (_this.region) region.draw(reserve);
+            callback();
+          }
+        });
+      };
+      return new Promise((resolve, reject) => {
+        this.help.instance.toDataURL = () => {
+          return new Promise((resolveUrl) => {
+            uni.canvasToTempFilePath(
+              {
+                canvasId: painterid,
+                success: function (e) {
+                  resolveUrl(e.tempFilePath);
+                },
+              },
+              // #ifndef MP-ALIPAY
+              this
+              // #endif
+            );
           });
-
         };
-        return new Promise((resolve, reject) => {
-          this.help.instance.toDataURL = () => {
-            return new Promise((resolveUrl) => {
-              uni.canvasToTempFilePath(
-                {
-                  canvasId: painterid,
-                  success: function (e) {
-                    resolveUrl(e.tempFilePath);
-                  },
-                }
-                // #ifndef MP-ALIPAY
-                , this
-                // #endif
-              );
-            });
-          };
 
-          resolve(this.help.instance);
-        });
-      },
-      doit(event, doback) {
-        let doRun = (x, y) => {
-          this.help.instance.getRegion(x, y).then((regionName) => {
-            // 兼容旧语法
-            if (typeof doback == "function") doback(regionName);
+        resolve(this.help.instance);
+      });
+    },
+    doit(event, doback) {
+      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,
-            });
+          this.$emit("dotouchstart", {
+            name: regionName,
+            x: x,
+            y: y,
           });
-        };
+        });
+      };
 
-        if (this.cover || this.isH5) {
-          let x = event.touches[0].x;
-          let y = event.touches[0].y;
-          doRun(x, y);
-        } 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) {
-        this.doit(event, this.touchstart);
-      },
+      if (this.cover || this.isH5) {
+        let x = event.touches[0].x;
+        let y = event.touches[0].y;
+        doRun(x, y);
+      } 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) {
+      this.doit(event, this.touchstart);
     },
-  };
-  </script>
+  },
+};
+</script>
 
   <style lang="css" scoped>
-  /* 辅助的区域不应该可以看见 */
-  .region {
-    position: fixed;
-    left: 50000px;
-  }
+/* 辅助的区域不应该可以看见 */
+.region {
+  position: fixed;
+  left: 50000px;
+}
+
+.cover-view,
+.normal-view {
+  display: inline-block;
+}
 
-  .cover-view .view-img {
-    display: none;
-  }
+.cover-view .view-img {
+  display: none;
+}
 
-  .normal-view .painter {
-    position: fixed;
-    left: 50000px;
-  }
-  </style>
+.normal-view .painter {
+  position: fixed;
+  left: 50000px;
+}
+</style>