diff --git a/pages/index/index.vue b/pages/index/index.vue index 43ae4de..ee807d8 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -38,45 +38,55 @@ const startY = ref(0) const isDragging = ref(false) const imgUrl = ref('https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg'); // 修改为ref +async function draw() { + const ctx = uni.createCanvasContext('canvas', instance); + ctx.save(); // 保存当前状态 + ctx.translate(offsetX.value, offsetY.value); // 应用偏移 + ctx.scale(scale.value, scale.value); // 应用缩放 + const res = await uni.getImageInfo({ src: imgUrl.value }); + ctx.drawImage(res.path, 0, 0); // 根据变换后的坐标系绘制图片 + ctx.restore(); // 恢复之前保存的状态 + ctx.draw(); +} - async function draw() { - const ctx = uni.createCanvasContext('canvas', instance) // 创建canvas绘图上下文 - ctx.scale(scale.value, scale.value); - const res = await uni.getImageInfo({ - src: imgUrl.value, - }) - ctx.drawImage(res.path, 0, 0); + // async function draw() { + // const ctx = uni.createCanvasContext('canvas', instance) // 创建canvas绘图上下文 + // ctx.scale(scale.value, scale.value); + // const res = await uni.getImageInfo({ + // src: imgUrl.value, + // }) + // ctx.drawImage(res.path, 0, 0); - // ctx.beginPath(); - // ctx.moveTo(50, 50); // 左下角点 - // ctx.lineTo(150, 50); // 右下角点 - // ctx.lineTo(200, 100); // 右上角点 - // ctx.lineTo(100, 100); // 左上角点 - // ctx.closePath(); // 闭合路径 - // ctx.stroke(); // 绘制边框 + // // ctx.beginPath(); + // // ctx.moveTo(50, 50); // 左下角点 + // // ctx.lineTo(150, 50); // 右下角点 + // // ctx.lineTo(200, 100); // 右上角点 + // // ctx.lineTo(100, 100); // 左上角点 + // // ctx.closePath(); // 闭合路径 + // // ctx.stroke(); // 绘制边框 - // 先不删 - // let xoffset = 0, yoffset = 0, flag = false; - // polygonList.forEach((level, index) => { - // // console.log('level',level) - // ctx.moveTo(level.polygon[0] + xoffset, level.polygon[0] + yoffset) - // level.polygon.forEach((level2,level2Index)=>{ - // ctx.beginPath() - // if(level2Index != level.polygon.length ){ - // ctx.lineTo(level2 + xoffset, level.polygon[level2Index+1]) - // console.log(level2 + xoffset, level.polygon[level2Index+1]) - // }else{ - // ctx.lineTo(level2 + xoffset, level.polygon[0]) - // console.log(level2 + xoffset, level.polygon[0]) - // } - // ctx.closePath() - // }) - // if(polygonList.length == index){ - // flag = true - // } - // }) - ctx.draw() - } + // // 先不删 + // // let xoffset = 0, yoffset = 0, flag = false; + // // polygonList.forEach((level, index) => { + // // // console.log('level',level) + // // ctx.moveTo(level.polygon[0] + xoffset, level.polygon[0] + yoffset) + // // level.polygon.forEach((level2,level2Index)=>{ + // // ctx.beginPath() + // // if(level2Index != level.polygon.length ){ + // // ctx.lineTo(level2 + xoffset, level.polygon[level2Index+1]) + // // console.log(level2 + xoffset, level.polygon[level2Index+1]) + // // }else{ + // // ctx.lineTo(level2 + xoffset, level.polygon[0]) + // // console.log(level2 + xoffset, level.polygon[0]) + // // } + // // ctx.closePath() + // // }) + // // if(polygonList.length == index){ + // // flag = true + // // } + // // }) + // ctx.draw() + // } // 处理canvas触摸事件 function handleCanvasTouch(event) { @@ -108,28 +118,49 @@ // 触摸移动 const handleTouchMove = (e) => { - console.log('handleTouchMove') if (e.touches.length === 1 && isDragging.value) { - // 单指移动 - const currentX = e.touches[0].clientX - startX.value - const currentY = e.touches[0].clientY - startY.value - offsetX.value = currentX - offsetY.value = currentY + // 单指移动逻辑... + offsetX.value = e.touches[0].clientX - startX.value; + offsetY.value = e.touches[0].clientY - startY.value; } else if (e.touches.length === 2) { - // 双指缩放 - const x1 = e.touches[0].clientX - const y1 = e.touches[0].clientY - const x2 = e.touches[1].clientX - const y2 = e.touches[1].clientY - const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) + // 双指缩放逻辑... + const x1 = e.touches[0].clientX, y1 = e.touches[0].clientY; + const x2 = e.touches[1].clientX, y2 = e.touches[1].clientY; + const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); if (lastDistance.value > 0) { - const newScale = scale.value * (distance / lastDistance.value) - scale.value = Math.min(Math.max(newScale, 0.5), 4) // 限制缩放范围 + scale.value = Math.min(Math.max(scale.value * (distance / lastDistance.value), 0.5), 4); + draw(); // 重新绘制Canvas内容 } - lastDistance.value = distance + lastDistance.value = distance; } - } + }; + // const handleTouchMove = (e) => { + // console.log('handleTouchMove') + // if (e.touches.length === 1 && isDragging.value) { + // // 单指移动 + // const currentX = e.touches[0].clientX - startX.value + // const currentY = e.touches[0].clientY - startY.value + // offsetX.value = currentX + // offsetY.value = currentY + // } else if (e.touches.length === 2) { + // uni.showToast({ + // title:'走到了双指' + // }) + // // 双指缩放 + // const x1 = e.touches[0].clientX + // const y1 = e.touches[0].clientY + // const x2 = e.touches[1].clientX + // const y2 = e.touches[1].clientY + // const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) + + // if (lastDistance.value > 0) { + // const newScale = scale.value * (distance / lastDistance.value) + // scale.value = Math.min(Math.max(newScale, 0.5), 4) // 限制缩放范围 + // } + // lastDistance.value = distance + // } + // } // 触摸结束 const handleTouchEnd = () => { @@ -156,7 +187,9 @@ success: function (sres) { console.log(sres,'sres'); imgUrl.value = sres.tempFilePath || sres.path - draw() + // setInterval(()=>{ + draw() + // },16) },fail:function(fres){ console.log('fres',fres) } diff --git a/unpackage/dist/dev/.sourcemap/mp-weixin/index.js.map b/unpackage/dist/dev/.sourcemap/mp-weixin/index.js.map index 15a6951..e8453d3 100644 --- a/unpackage/dist/dev/.sourcemap/mp-weixin/index.js.map +++ b/unpackage/dist/dev/.sourcemap/mp-weixin/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"} \ No newline at end of file +{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"} \ No newline at end of file diff --git a/unpackage/dist/dev/mp-weixin/common/vendor.js b/unpackage/dist/dev/mp-weixin/common/vendor.js index 69564f1..6820072 100644 --- a/unpackage/dist/dev/mp-weixin/common/vendor.js +++ b/unpackage/dist/dev/mp-weixin/common/vendor.js @@ -6789,7 +6789,7 @@ function initOnError() { function initRuntimeSocketService() { const hosts = "127.0.0.1,172.10.0.117"; const port = "8090"; - const id = "mp-weixin_c9b8fP"; + const id = "mp-weixin_VFGAao"; const lazy = typeof swan !== "undefined"; let restoreError = lazy ? () => { } : initOnError(); diff --git a/unpackage/dist/dev/mp-weixin/index.js b/unpackage/dist/dev/mp-weixin/index.js index 1525d68..1a01759 100644 --- a/unpackage/dist/dev/mp-weixin/index.js +++ b/unpackage/dist/dev/mp-weixin/index.js @@ -16,15 +16,16 @@ const _sfc_main = { const imgUrl = common_vendor.ref("https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg"); async function draw() { const ctx = common_vendor.index.createCanvasContext("canvas", instance); + ctx.save(); + ctx.translate(offsetX.value, offsetY.value); ctx.scale(scale.value, scale.value); - const res = await common_vendor.index.getImageInfo({ - src: imgUrl.value - }); + const res = await common_vendor.index.getImageInfo({ src: imgUrl.value }); ctx.drawImage(res.path, 0, 0); + ctx.restore(); ctx.draw(); } const handleTouchStart = (e) => { - common_vendor.index.__f__("log", "at pages/index/index.vue:93", "handleTouchStart"); + common_vendor.index.__f__("log", "at pages/index/index.vue:103", "handleTouchStart"); if (e.touches.length === 1) { startX.value = e.touches[0].clientX - offsetX.value; startY.value = e.touches[0].clientY - offsetY.value; @@ -38,27 +39,22 @@ const _sfc_main = { } }; const handleTouchMove = (e) => { - common_vendor.index.__f__("log", "at pages/index/index.vue:111", "handleTouchMove"); if (e.touches.length === 1 && isDragging.value) { - const currentX = e.touches[0].clientX - startX.value; - const currentY = e.touches[0].clientY - startY.value; - offsetX.value = currentX; - offsetY.value = currentY; + offsetX.value = e.touches[0].clientX - startX.value; + offsetY.value = e.touches[0].clientY - startY.value; } else if (e.touches.length === 2) { - const x1 = e.touches[0].clientX; - const y1 = e.touches[0].clientY; - const x2 = e.touches[1].clientX; - const y2 = e.touches[1].clientY; + const x1 = e.touches[0].clientX, y1 = e.touches[0].clientY; + const x2 = e.touches[1].clientX, y2 = e.touches[1].clientY; const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); if (lastDistance.value > 0) { - const newScale = scale.value * (distance / lastDistance.value); - scale.value = Math.min(Math.max(newScale, 0.5), 4); + scale.value = Math.min(Math.max(scale.value * (distance / lastDistance.value), 0.5), 4); + draw(); } lastDistance.value = distance; } }; const handleTouchEnd = () => { - common_vendor.index.__f__("log", "at pages/index/index.vue:136", "handleTouchEnd"); + common_vendor.index.__f__("log", "at pages/index/index.vue:167", "handleTouchEnd"); lastDistance.value = -1; isDragging.value = false; }; @@ -66,16 +62,16 @@ const _sfc_main = { draw(); }; common_vendor.onReady(() => { - common_vendor.index.__f__("log", "at pages/index/index.vue:153", "onReadyonReady"); + common_vendor.index.__f__("log", "at pages/index/index.vue:184", "onReadyonReady"); common_vendor.index.downloadFile({ url: imgUrl.value, success: function(sres) { - common_vendor.index.__f__("log", "at pages/index/index.vue:157", sres, "sres"); + common_vendor.index.__f__("log", "at pages/index/index.vue:188", sres, "sres"); imgUrl.value = sres.tempFilePath || sres.path; draw(); }, fail: function(fres) { - common_vendor.index.__f__("log", "at pages/index/index.vue:161", "fres", fres); + common_vendor.index.__f__("log", "at pages/index/index.vue:194", "fres", fres); } }); });