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,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)
}

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() {
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();

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");
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);
}
});
});