drag-img

移动端旋转、缩放、移动图片组件(仅支持移动端)

Usage no npm install needed!

<script type="module">
  import dragImg from 'https://cdn.skypack.dev/drag-img';
</script>

README

drag-img

移动端旋转、缩放、移动图片组件(仅支持移动端)

安装

npm install drag-img -S

使用

  1. 直接引用
/* 旋转按钮图片 */
.dragRotateScale_move .dragRotateScale_rotate {
    background-image: url('../../static/b.jpg');
}
/* 关闭按钮图片 */
.dragRotateScale_move .dragRotateScale_close {
    background-image: url('../../static/b.jpg');
}
<script type="text/javascript" src="./dragRotateScale.js"></script>
let preImg2 = document.getElementById('preImg2')
new dragRotateScale(preImg2, {
    ...
})
  1. npm
/* 旋转按钮图片 */
.dragRotateScale_move .dragRotateScale_rotate {
    background-image: url('../../static/b.jpg');
}
/* 关闭按钮图片 */
.dragRotateScale_move .dragRotateScale_close {
    background-image: url('../../static/b.jpg');
}
import dragrotatescale from 'drag-img'
new dragrotatescale(preImg2, {
    src: img,         //要拖动的图片地址
    rotateButton: 30, // 按钮的宽高
    imgScaleMax: 10,  //缩放限制
    imgScaleMin: 0.1,
    rotateStart() {   //钩子
        console.log('rotateStart')
    },
    rotateMove(o) {
        console.log('rotateMove', o)
    },
    imgStart() {
        console.log('imgStart')
    },
    imgMove() {
        console.log('imgMove')
    },
    imgEnd() {
        console.log('imgEnd')
    },
    imgClose() {
        console.log('imgClose')
    }
})


预览

预览