renyt/canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

缩放

Browse Source
This commit is contained in:
sunmeng 2025-05-08 18:17:51 +08:00
parent 5664bfdfda
commit c4179dae9d
4 changed files with 103 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
pages/index/index.vue
View File

@ -38,46 +38,56 @@
const startY = ref(0) const startY = ref(0)
const isDragging = ref(false) const isDragging = ref(false)
const imgUrl = ref('https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg'); // 修改为ref const imgUrl = ref('https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg'); // 修改为ref
async function draw() { async function draw() {
const ctx = uni.createCanvasContext('canvas', instance) // 创建canvas绘图上下文 const ctx = uni.createCanvasContext('canvas', instance);
ctx.scale(scale.value, scale.value); ctx.save(); // 保存当前状态
const res = await uni.getImageInfo({ ctx.translate(offsetX.value, offsetY.value); // 应用偏移
src: imgUrl.value, ctx.scale(scale.value, scale.value); // 应用缩放
}) const res = await uni.getImageInfo({ src: imgUrl.value });
ctx.drawImage(res.path, 0, 0); ctx.drawImage(res.path, 0, 0); // 根据变换后的坐标系绘制图片
ctx.restore(); // 恢复之前保存的状态
// ctx.beginPath(); ctx.draw();
// 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()
} }
// 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(); // 绘制边框
// // 先不删
// // 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触摸事件 // 处理canvas触摸事件
function handleCanvasTouch(event) { function handleCanvasTouch(event) {
// 获取触摸点的坐标 // 获取触摸点的坐标
@ -108,28 +118,49 @@
// 触摸移动 // 触摸移动
const handleTouchMove = (e) => { const handleTouchMove = (e) => {
console.log('handleTouchMove')
if (e.touches.length === 1 && isDragging.value) { if (e.touches.length === 1 && isDragging.value) {
// 单指移动 // 单指移动逻辑...
const currentX = e.touches[0].clientX - startX.value offsetX.value = e.touches[0].clientX - startX.value;
const currentY = e.touches[0].clientY - startY.value offsetY.value = e.touches[0].clientY - startY.value;
offsetX.value = currentX
offsetY.value = currentY
} else if (e.touches.length === 2) { } else if (e.touches.length === 2) {
// 双指缩放 // 双指缩放逻辑...
const x1 = e.touches[0].clientX const x1 = e.touches[0].clientX, y1 = e.touches[0].clientY;
const y1 = e.touches[0].clientY const x2 = e.touches[1].clientX, y2 = e.touches[1].clientY;
const x2 = e.touches[1].clientX const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
const y2 = e.touches[1].clientY
const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
if (lastDistance.value > 0) { if (lastDistance.value > 0) {
const newScale = scale.value * (distance / lastDistance.value) scale.value = Math.min(Math.max(scale.value * (distance / lastDistance.value), 0.5), 4);
scale.value = Math.min(Math.max(newScale, 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 = () => { const handleTouchEnd = () => {
@ -156,7 +187,9 @@
success: function (sres) { success: function (sres) {
console.log(sres,'sres'); console.log(sres,'sres');
imgUrl.value = sres.tempFilePath || sres.path imgUrl.value = sres.tempFilePath || sres.path
// setInterval(()=>{
draw() draw()
// },16)
},fail:function(fres){ },fail:function(fres){
console.log('fres',fres) console.log('fres',fres)
} }

2
unpackage/dist/dev/.sourcemap/mp-weixin/index.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"} {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

2
unpackage/dist/dev/mp-weixin/common/vendor.js vendored
View File

@ -6789,7 +6789,7 @@ function initOnError() {
function initRuntimeSocketService() { function initRuntimeSocketService() {
const hosts = "127.0.0.1,172.10.0.117"; const hosts = "127.0.0.1,172.10.0.117";
const port = "8090"; const port = "8090";
const id = "mp-weixin_c9b8fP"; const id = "mp-weixin_VFGAao";
const lazy = typeof swan !== "undefined"; const lazy = typeof swan !== "undefined";
let restoreError = lazy ? () => { let restoreError = lazy ? () => {
} : initOnError(); } : initOnError();

34
unpackage/dist/dev/mp-weixin/index.js vendored
View File

@ -16,15 +16,16 @@ const _sfc_main = {
const imgUrl = common_vendor.ref("https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg"); const imgUrl = common_vendor.ref("https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg");
async function draw() { async function draw() {
const ctx = common_vendor.index.createCanvasContext("canvas", instance); const ctx = common_vendor.index.createCanvasContext("canvas", instance);
ctx.save();
ctx.translate(offsetX.value, offsetY.value);
ctx.scale(scale.value, scale.value); ctx.scale(scale.value, scale.value);
const res = await common_vendor.index.getImageInfo({ const res = await common_vendor.index.getImageInfo({ src: imgUrl.value });
src: imgUrl.value
});
ctx.drawImage(res.path, 0, 0); ctx.drawImage(res.path, 0, 0);
ctx.restore();
ctx.draw(); ctx.draw();
} }
const handleTouchStart = (e) => { 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) { if (e.touches.length === 1) {
startX.value = e.touches[0].clientX - offsetX.value; startX.value = e.touches[0].clientX - offsetX.value;
startY.value = e.touches[0].clientY - offsetY.value; startY.value = e.touches[0].clientY - offsetY.value;
@ -38,27 +39,22 @@ const _sfc_main = {
} }
}; };
const handleTouchMove = (e) => { const handleTouchMove = (e) => {
common_vendor.index.__f__("log", "at pages/index/index.vue:111", "handleTouchMove");
if (e.touches.length === 1 && isDragging.value) { if (e.touches.length === 1 && isDragging.value) {
const currentX = e.touches[0].clientX - startX.value; offsetX.value = e.touches[0].clientX - startX.value;
const currentY = e.touches[0].clientY - startY.value; offsetY.value = e.touches[0].clientY - startY.value;
offsetX.value = currentX;
offsetY.value = currentY;
} else if (e.touches.length === 2) { } else if (e.touches.length === 2) {
const x1 = e.touches[0].clientX; const x1 = e.touches[0].clientX, y1 = e.touches[0].clientY;
const y1 = e.touches[0].clientY; const x2 = e.touches[1].clientX, y2 = e.touches[1].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 distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
if (lastDistance.value > 0) { if (lastDistance.value > 0) {
const newScale = scale.value * (distance / lastDistance.value); scale.value = Math.min(Math.max(scale.value * (distance / lastDistance.value), 0.5), 4);
scale.value = Math.min(Math.max(newScale, 0.5), 4); draw();
} }
lastDistance.value = distance; lastDistance.value = distance;
} }
}; };
const handleTouchEnd = () => { 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; lastDistance.value = -1;
isDragging.value = false; isDragging.value = false;
}; };
@ -66,16 +62,16 @@ const _sfc_main = {
draw(); draw();
}; };
common_vendor.onReady(() => { 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({ common_vendor.index.downloadFile({
url: imgUrl.value, url: imgUrl.value,
success: function(sres) { 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; imgUrl.value = sres.tempFilePath || sres.path;
draw(); draw();
}, },
fail: function(fres) { 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);
} }
}); });
}); });