emacroh5lib 1.0.47 → 1.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/emacroh5lib.min.js +1 -1
  2. package/package.json +1 -1
  3. package/src/views/ImageViewer/index.vue +62 -45
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "emacroh5lib",
3
- "version": "1.0.47",
3
+ "version": "1.0.50",
4
4
  "description": "EMacro前端组件库",
5
5
  "main": "dist/emacroh5lib.min.js",
6
6
  "scripts": {
package/src/views/ImageViewer/index.vue CHANGED
@@ -229,52 +229,53 @@
229
229
  resetZoom(adaptive = true) {
230
230
  const image = this.image;
231
231
 
232
- let { width, height } = image;
233
- if (adaptive) {
234
- let rate = 1
235
- if (width > height) {
236
- rate = width / document.body.clientWidth
237
- } else {
238
- rate = height / document.body.clientHeight
239
- }
240
- width = width / rate
241
- height = height / rate
242
- }
243
-
244
- this.setStyleByName(image, "width", `${width}px`);
245
- this.setStyleByName(image, "height", `${height}px`);
246
-
247
- this.listDataCache[this.index].width = `${width}px`;
248
- this.listDataCache[this.index].height = `${height}px`;
232
+ // let { width, height } = image;
233
+ // if (adaptive) {
234
+ // let rate = 1
235
+ // if (width > height) {
236
+ // rate = width / document.body.clientWidth
237
+ // } else {
238
+ // rate = height / document.body.clientHeight
239
+ // }
240
+ // width = width / rate
241
+ // height = height / rate
242
+ // }
249
243
 
244
+ // this.setStyleByName(image, "width", `${width}px`);
245
+ // this.setStyleByName(image, "height", `${height}px`);
250
246
 
247
+ // if (this.listDataCache[this.index] != null) {
248
+ // this.listDataCache[this.index].width = `${width}px`;
249
+ // this.listDataCache[this.index].height = `${height}px`;
250
+ // }
251
251
 
252
252
 
253
253
 
254
+ // --------------------------------------------------------------------------------------------------
255
+ const imageObject = new Image();
256
+ imageObject.src = this.list[this.index];
257
+ const $this = this
258
+ imageObject.onload = () => {
254
259
 
255
- // const imageObject = new Image();
256
- // imageObject.src = this.list[this.index];
257
- // const $this = this
258
- // imageObject.onload = () => {
260
+ let { width, height } = imageObject;
261
+ if (adaptive) {
262
+ let rate = 1
263
+ if (width > height) {
264
+ rate = width / document.body.clientWidth
265
+ } else {
266
+ rate = height / document.body.clientHeight
267
+ }
268
+ width = width / rate
269
+ height = height / rate
270
+ }
259
271
 
260
- // let { width, height } = imageObject;
261
- // if (adaptive) {
262
- // let rate = 1
263
- // if (width > height) {
264
- // rate = width / document.body.clientWidth
265
- // } else {
266
- // rate = height / document.body.clientHeight
267
- // }
268
- // width = width / rate
269
- // height = height / rate
270
- // }
272
+ $this.setStyleByName(image, "width", `${width}px`);
273
+ $this.setStyleByName(image, "height", `${height}px`);
271
274
 
272
- // $this.setStyleByName(image, "width", `${width}px`);
273
- // $this.setStyleByName(image, "height", `${height}px`);
275
+ $this.listDataCache[this.index].width = `${width}px`;
276
+ $this.listDataCache[this.index].height = `${height}px`;
277
+ }
274
278
 
275
- // $this.listDataCache[this.index].width = `${width}px`;
276
- // $this.listDataCache[this.index].height = `${height}px`;
277
- // }
278
279
 
279
280
  },
280
281
 
@@ -317,8 +318,8 @@
317
318
 
318
319
  // Get element current transform
319
320
  getCurrentTransform(obj) {
320
- let value,
321
- transform = this.getStyleByName(obj, "transform");
321
+ let value;
322
+ const transform = this.getStyleByName(obj, "transform");
322
323
 
323
324
  if (transform === "none") return;
324
325
 
@@ -356,14 +357,30 @@
356
357
 
357
358
  setTimeout(() => {
358
359
 
359
- if (this.currentData) {
360
- this.setStyleByName(this.image, "width", this.currentData.width);
361
- this.setStyleByName(this.image, "height", this.currentData.height);
362
- this.setStyleByName(this.image, "left", this.currentData.left);
363
- this.setStyleByName(this.image, "top", this.currentData.top);
364
- this.setTransform(this.image, this.currentData.transform);
360
+ let data = {
361
+ transform: {
362
+ scaleX: "1",
363
+ skewY: "0",
364
+ translateX: "-50%",
365
+ translateY: "-50%",
366
+ rotate: "0deg",
367
+ },
368
+ left: "50%",
369
+ top: "50%",
370
+ width: `${imageObject.width}px`,
371
+ height: `${imageObject.height}px`,
372
+ };
373
+ if (this.currentData != null && this.currentData.width != null && this.currentData.height != null &&
374
+ this.currentData.left != null && this.currentData.top != null && this.currentData.transform != null) {
375
+ data = this.currentData
365
376
  }
366
377
 
378
+ this.setStyleByName(this.image, "width", data.width);
379
+ this.setStyleByName(this.image, "height", data.height);
380
+ this.setStyleByName(this.image, "left", data.left);
381
+ this.setStyleByName(this.image, "top", data.top);
382
+ this.setTransform(this.image, data.transform);
383
+
367
384
  this.resetZoom();
368
385
  this.resetPosition();
369
386
  }, 100);