Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added touchscreen functions on zoom-image panel

Browse Source
This commit is contained in:
Nicola Carminati
2018-12-17 14:05:11 +01:00
parent 501f2e7f3f
commit 2a32268fb2
1 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/wwwroot/src/modules/base-components/zoom-image.vue
+29 -8
View File
@@ -1,6 +1,6 @@
<template>
<div class="imageViewerZoom" >
<div ref="container" class="container" @mousemove="move" @mousedown="dw" @wheel="ScaleImage" >
<div ref="container" class="container" @mousemove="move" @mousedown="dw" @wheel="ScaleImage" @touchstart="dw" @touchmove="move" @dblclick="zoomPlusAnimated" >
<img ref="imageChild" :style="{'transform':transImage,'transition':animation}" :src="imageSrc" >
</div>
<div class="btngroup_close">
@@ -62,16 +62,37 @@ export default {
this.$emit("close");
},
dw(event) {
this.startX= event.clientX;
this.startY= event.clientY;
if(event.touches && event.touches[0])
{
this.startX= event.touches[0].clientX;
this.startY= event.touches[0].clientY;
}
else
{
this.startX= event.clientX;
this.startY= event.clientY;
}
},
prova(event) {
alert("ciao");
},
move(event) {
if(event.buttons > 0){
if(event.buttons > 0 || event.touches){
this.animation= "0s";
this.offX = event.clientX - this.startX;
this.offY = event.clientY - this.startY;
this.startX= event.clientX;
this.startY= event.clientY;
if(event.touches && event.touches[0])
{
this.offX = event.touches[0].clientX - this.startX;
this.offY = event.touches[0].clientY - this.startY;
this.startX= event.touches[0].clientX;
this.startY= event.touches[0].clientY;
}
else
{
this.offX = event.clientX - this.startX;
this.offY = event.clientY - this.startY;
this.startX= event.clientX;
this.startY= event.clientY;
}
this.lastX = this.lastX + this.offX;
this.lastY = this.lastY + this.offY;
this.transImage = "translateX("+this.lastX+"px)translateY("+this.lastY+"px)scale("+this.scaleImage+")";