js实现图片滚轮、按钮缩放大小,图片旋转,图片拖拽

JavaScript019

js实现图片滚轮、按钮缩放大小,图片旋转,图片拖拽,第1张

<div class="upload-img-box" ref="moveWrap">

<div class="show-box" ref="rotate" @mousedown="moveImg" @mousewheel.prevent="rollImg($event,)">

<img :src="singleList.fileImgUrl" class="uploadimg" ref="img" :style="{transform:'scale('+multiples/100+') rotate('+rotate +'deg)'}"/>

</div>

<div class="img-plus" @click="toBIgChange()"><span class="tip">放大</span></div>

<div class="img-minus" @click="toSmallChange()"><span class="tip">缩小</span></div>

<div class="img-rotate" @click="toRotate()"><span class="tip">旋转</span></div>

</div>

上述属于网上找到的旋转缩放拖动的touch.js使用方法,

注意:在自己项目使用的时候定位的元素 只能添加 top 和 left 因为touch操作的就是元素的left和top 如果添加right和bottom在touch操作元素的时候只添加和覆盖left和top而 right和bottom不变 那么拖动缩放等真实效果可想而知了。

还有在真实项目中可拖动元素的位置不一定都是0.0坐标开始的 这个需要根据元素的真实left 和 top 的px值来更改方法cat.touchjs里面的left 和 top值。