/* component/picPro/picPro.wxss */ @import '../../resource/style/flex.wxss'; .body{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .text_white{ color: white; } .main{ } .out_item{ width: 100%; height: 100%; flex: 1; } .bg_dark{ background-color: rgba(0, 0, 0, 0.85) } .main_item{ width: 15px; } .inner{ outline: 3rpx solid white; background-color: rgba(0, 0, 0, 0.12); box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset; } .inner_item{ width: 8px; height: 8px; } .inner_item.left_top{ border-left: 3px solid white; border-top: 3px solid white; left: -3px; top: -3px; } .inner_item.right_top{ border-right: 3px solid white; border-top: 3px solid white; right: -3px; top: -3px; } .inner_item.right_bottom{ border-right: 3px solid white; border-bottom: 3px solid white; right: -3px; bottom: -3px; } .inner_item.left_bottom{ border-left: 3px solid white; border-bottom: 3px solid white; left: -3px; bottom: -3px; } .img{ z-index: -1; } .bg_black{ background-color:black; z-index: -2; } .text_bg{ padding-bottom: 2em; font-size: 0.9em; } .img_canvas{ opacity: 0.5; } .newImg{ z-index: 2 }
js：
// component/picPro/picPro.js const state = { // 可用区域body window: { width: 0, height: 0 }, // 原始图片信息 originImg: { width: 0, height: 0 }, // 第一次图片缩放信息 firstScaleImg: { width: 0, height: 0 }, // 截取区域信息 interArea: { width: 0, height: 0 }, // 单手触摸位置 touchLast: { x: 0, y: 0 }, // 滑动距离 touchMove: { x: 0, y: 0 }, // 滑动离开时图片状态 moveImgState: { width: 0, height: 0, top: 0, left: 0, }, // 双手触摸位置 touchList: [{ x: 0, y: 0 }, { x: 0, y: 0 }], // 图片缩放比例 scale: 1, } Component({ /** * 组件的属性列表 */ properties: { //宽（非实际值） width: { type: Number, value: 600 }, //高 height: { type: Number, value: 300 }, //图片路径 src: { type: String, value: "" }, //显示隐藏 hidden: { type: Boolean, value: false }, //截取框的信息 margin: { type: Object, value: { left: 15, right: 15, top: 200, bottom: 200, } } }, ready() { this.initialize(); // const canvas = wx.createCanvasContext('imgCanvas', this); // canvas.draw(false, () => { console.log('ccc') }, this); }, /** * 组件的初始数据 */ data: { touchRange: 8, img: { width: 0, height: 0, top: 0, left: 0, }, canvas: {}, ratio: 0, originImg: { width: 0, height: 0 } }, /** * 组件的方法列表 */ methods: { touchstart(e) { // console.log("touchstart", e); }, touchmove(e) { if (e.touches.length === 1) { this.singleSlip(e.touches[0]) } else { this.doubleSlip(e.touches) } }, touchend(e) { // console.log("touchend", e); const x = 0, y = 0; state.touchLast = { x, y }; state.touchMove = { x, y }; state.touchList = [{ x, y }, { x, y }]; state.moveImgState = this.data.img; // console.log(this.data.img); }, // 单手滑动操作 singleSlip(e) { const { clientX: x, clientY: y } = e; const that = this; if (state.touchLast.x && state.touchLast.y) { state.touchMove = { x: x - state.touchLast.x, y: y - state.touchLast.y }; state.touchLast = { x, y }; const move = (_x = false, _y = false) => { const bottom = that.data.img.height + that.data.img.top; const right = that.data.img.width + that.data.img.left; const h = state.interArea.height; const w = state.interArea.width; const param = {}; if (_x) { if (right > w && that.data.img.left < 0) { param.left = that.data.img.left + state.touchMove.x * 0.1 } else if (right <= w && state.touchMove.x > 0) { param.left = that.data.img.left + state.touchMove.x * 0.1 } else if (that.data.img.left >= 0 && state.touchMove.x < 0) { param.left = that.data.img.left + state.touchMove.x * 0.1 } }; if (_y) { if (bottom > h && that.data.img.top < 0) { param.top = that.data.img.top + state.touchMove.y * 0.1 } else if (bottom <= h && state.touchMove.y > 0) { param.top = that.data.img.top + state.touchMove.y * 0.1 } else if (that.data.img.top >= 0 && state.touchMove.y < 0) { param.top = that.data.img.top + state.touchMove.y * 0.1 } }; // console.log(param); that.setImgPos(param) }; if (state.scale == 1) { if (that.data.img.width == state.interArea.width) { move(false, true) } else { move(true, false) } } else { move(true, true) } } else { state.touchLast = { x, y } } }, // 双手缩放操作 doubleSlip(e) { const that = this; const { clientX: x0, clientY: y0 } = e[0]; const { clientX: x1, clientY: y1 } = e[1]; if (state.touchList[0].x && state.touchList[0].y) { let changeScale = (Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0)) - Math.sqrt((state.touchList[1].x - state.touchList[0].x) * (state.touchList[1].x - state.touchList[0].x) + (state.touchList[1].y - state.touchList[0].y) * (state.touchList[1].y - state.touchList[0].y))) * 0.0005; changeScale = changeScale >= 1.5 ? 1.5 : (changeScale <= -1 ? -1 : changeScale); state.scale = that.data.img.width / state.firstScaleImg.width < 1 ? 1 : (state.scale > 2.5 ? 2.5 : 1 + changeScale); let width = state.firstScaleImg.width * (state.scale - 1) + state.moveImgState.width; width = width < state.firstScaleImg.width ? state.firstScaleImg.width : width; let height = state.firstScaleImg.height * (state.scale - 1) + state.moveImgState.height; height = height < state.firstScaleImg.height ? state.firstScaleImg.height : height; let left = width * (1 - state.scale) / 4 + state.moveImgState.left; left = left * (-1) > width - state.interArea.width ? state.interArea.width - width: left > 0 ? 0 : left; let top = height * (1 - state.scale) / 4 + state.moveImgState.top; top = top * (-1) > height - state.interArea.height ?state.interArea.height - height : top > 0 ? 0 : top; const setImgObj = { width, height, left, top }; that.setImgPos(setImgObj) } else { state.touchList = [{ x: x0, y: y0 }, { x: x1, y: y1 }] } }, // 获取可用区域宽高 getScreenInfo() { const that = this; return new Promise((resolve, reject) => { wx.getSystemInfo({ success: function (res) { const { windowHeight, windowWidth } = res; state.window = { windowHeight, windowWidth }; that.setData({ windowHeight, windowWidth }) // console.log(state.window); resolve(res); }, }) }) }, setShowArea() { const that = this; const w = state.window.windowWidth - that.data.margin.left - that.data.margin.right; const h = (that.data.height / that.data.width) * w; }, outputImg() { this.setData({ hidden: true, }) }, getImgInfo(path) { return new Promise((resolve, reject) => { wx.getImageInfo({ src: path, success(res) { console.log(res); resolve(res); }, fail(err) { reject(err) } }) }) }, // 设置图片 setImgPos({ width, height, top, left }) { width = width || this.data.img.width; height = height || this.data.img.height; top = top || this.data.img.top; left = left || this.data.img.left this.setData({ img: { width, height, top, left } }) }, // 初始化图片位置大小 initialize() { const that = this; const ratio = that.data.width / that.data.height; this.getScreenInfo().then(res => { console.log(res); state.interArea = { width: res.windowWidth - that.data.margin.left - that.data.margin.right + 2, height: (res.windowWidth - that.data.margin.left - that.data.margin.right) / ratio }; console.log("interArea", state.interArea) that.getImgInfo(that.data.src).then(imgInfo => { const { width, height } = imgInfo; const imgRatio = width / height; state.originImg = { width, height }; that.setData({ ratio: ratio }); if (imgRatio > ratio) { that.setImgPos({ height: state.interArea.height, width: state.interArea.height * imgRatio }) } else { that.setImgPos({ height: state.interArea.width / imgRatio, width: state.interArea.width, }) }; state.firstScaleImg = { width: that.data.img.width, height: that.data.img.height } }); }); }, // 截图 getImg(){ const that = this; // console.log('dudu', that.data.img); const canvas = wx.createCanvasContext('imgCanvas', this); const {width,height,left,top} = that.data.img; const saveImg = ()=>{ console.log('开始截取图片'); wx.canvasToTempFilePath({ canvasId:"imgCanvas", success(res){ // console.log(res); that.setData({ hidden:true, // src:"" }); that.triggerEvent("putimg", { imgUrl: res.tempFilePath},{}); }, fail(err){ console.log(err) } },that) }; canvas.drawImage(that.data.src, left, top, width, height); canvas.draw(false, () => { saveImg() }, that) } } })
引用的时候除了宽高路径以外，需要wx:if；如果不卸载组件，会出现只能截一次的bug
因为小程序里面没有类似vue中catch的观测数据变化的东西，也不想为了个组件专门去搞一个，就用这种方式代替了，嘻嘻，好敷衍。。
总结