我在canvas上贴了一张图,,然后伸缩放大或者旋转,上面三个操作点的位置没有在贴图旁边,正常的是下面这样
当图片是正方形的时候不存在这个问题,是长方形的时候就出现了这个问题.以下的代码,请指教一下要怎么修改这个问题
如果您觉得可以解决这个问题,但是需要有偿的话,可以留言告诉我
touchMoveAll: function (e) {
let editMask;
if (e.target.id.includes('mask')) {
const id = e.target.id.substring(4)
const index = this.addMaskList.findIndex(item => item.id ===id)
editMask = this.addMaskList[index];
// console.log('editMask', index)
} else {
editMask = this.editMask
}
const i = this.addMaskList.findIndex(item => item.id === editMask.id)
// 触摸点
const old_x = editMask.start.x
const old_y = editMask.start.y
const current_x = e.touches[0].clientX
const current_y = e.touches[0].clientY
// 伸缩比例
const old_scale = editMask.scale;
const old_rotate = editMask.rotate;
const moved_x = current_x - editMask.start.x //滑动距离x
const moved_y = current_y - editMask.start.y //滑动距离y
// 正在编辑的mask的中心点
const old_center_x = editMask.center.x
const old_center_y = editMask.center.y
// 伸缩操作点
// console.log(editMask);
// console.log(editMask.shrinkCenter.x);
const old_shrink_center_x = editMask.shrinkCenter.x
const old_shrink_center_y = editMask.shrinkCenter.y
const new_shrink_center_x = old_shrink_center_x + moved_x
const new_shrink_center_y = old_shrink_center_y + moved_y
// 旋转操作点
const old_rotate_center_x = editMask.rotateCenter.x
const old_rotate_center_y = editMask.rotateCenter.y
const new_rotate_center_x = old_rotate_center_x + moved_x
const new_rotate_center_y = old_rotate_center_y + moved_y
// 删除操作点
const old_detele_center_x = editMask.deteleCenter.x
const old_detele_center_y = editMask.deteleCenter.y
const new_detele_center_x = old_detele_center_x + moved_x
const new_detele_center_y = old_detele_center_y + moved_y
if (e.target.id.includes('mask')) {
editMask.center.x = old_center_x + moved_x
editMask.center.y = old_center_y + moved_y
editMask.shrinkCenter.x = new_shrink_center_x
editMask.shrinkCenter.y = new_shrink_center_y
editMask.rotateCenter.x = new_rotate_center_x
editMask.rotateCenter.y = new_rotate_center_y
editMask.deteleCenter.x = new_detele_center_x
editMask.deteleCenter.y = new_detele_center_y
editMask.start.x = current_x
editMask.start.y = current_y
} else if (e.target.id.includes('shrink')) {
// 得到拉伸点到中心点的距离，可算出伸缩比例
const diff_x_old = old_shrink_center_x - editMask.center.x
const diff_y_old = old_shrink_center_y - editMask.center.y
const diff_x_new = new_shrink_center_x - editMask.center.x
const diff_y_new = new_shrink_center_y - editMask.center.y
const distance_old = Math.sqrt(diff_x_old * diff_x_old + diff_y_old * diff_y_old)
const distance_new = Math.sqrt(diff_x_new * diff_x_new + diff_y_new * diff_y_new)
const jiaodu_new = (Math.atan2(diff_y_new, diff_x_new) / Math.PI) * 180 - editMask.rotate
const jiaodu_old = (Math.atan2(diff_y_old, diff_x_old) / Math.PI) * 180 - editMask.rotate
const width_new = distance_new * Math.cos(jiaodu_new * (Math.PI / 180))
const height_new = distance_new * Math.sin(jiaodu_new * (Math.PI / 180))
// 计算等比例缩放
const width_old = distance_old * Math.cos(jiaodu_old * (Math.PI / 180))
const height_old = distance_old * Math.sin(jiaodu_old * (Math.PI / 180))
const scale_ratio = Math.min(width_new / width_old, height_new / height_old);//计算缩放因子
const width_scale = old_scale.width * scale_ratio;//宽度比例
const height_scale = old_scale.height * scale_ratio;//高度比例
if (width_scale >= 0.2 && height_scale >= 0.2) {//禁止缩放时反转到背面
// 应用等比例缩放
editMask.scale.width = width_scale
editMask.scale.height = height_scale
const diff_rotate_x_old = old_rotate_center_x - old_center_x
const diff_rotate_y_old = old_rotate_center_y - old_center_y
const diff_rotate_x_new = new_rotate_center_x - old_center_x
const diff_rotate_y_new = new_rotate_center_y - old_center_y
const angle_old = (Math.atan2(diff_rotate_y_old, diff_rotate_x_old) / Math.PI) * 180
const angle_new = (Math.atan2(diff_rotate_y_new, diff_rotate_x_new) / Math.PI) * 180
const rotate = angle_new - angle_old + old_rotate
const distance_r = Math.sqrt(editMask.size.width * editMask.size.width * width_scale * width_scale +
editMask.size.height * editMask.size.height * height_scale * height_scale) //旋转半径
const jiaodu = (Math.atan2(height_scale, width_scale) / Math.PI) * 180
const rotate_x = Math.cos((jiaodu - editMask.rotate) * (Math.PI / 180)) * distance_r
const rotate_y = Math.sin((jiaodu - editMask.rotate) * (Math.PI / 180)) * distance_r
const rotate_x_d = Math.cos((jiaodu + editMask.rotate) * (Math.PI / 180)) * distance_r
const rotate_y_d = Math.sin((jiaodu + editMask.rotate) * (Math.PI / 180)) * distance_r
// 计算收缩点位置
const shrink_x = Math.cos((jiaodu + rotate) * (Math.PI / 180)) * distance_r
const shrink_y = Math.sin((jiaodu + rotate) * (Math.PI / 180)) * distance_r
editMask.shrinkCenter.x = old_center_x + shrink_x / 2
editMask.shrinkCenter.y = old_center_y + shrink_y / 2
editMask.rotateCenter.x = old_center_x + rotate_x / 2
editMask.rotateCenter.y = old_center_y - rotate_y / 2
// 删除控制器的位置
editMask.deteleCenter.x = old_center_x - rotate_x_d / 2
editMask.deteleCenter.y = old_center_y - rotate_y_d / 2
editMask.start.x = current_x
editMask.start.y = current_y
}
} else if (e.target.id.includes('rotate')) {
// console.log('old_center_x:', old_center_x, old_center_y)
// 得到旋转点到中心点的距离，可算出旋转角度
const diff_rotate_x_old = old_rotate_center_x - old_center_x
const diff_rotate_y_old = old_rotate_center_y - old_center_y
const diff_rotate_x_new = new_rotate_center_x - old_center_x
const diff_rotate_y_new = new_rotate_center_y - old_center_y
const distance_r = Math.sqrt(editMask.size.width * editMask.size.width * old_scale.width * old_scale.width +
editMask.size.height * editMask.size.height * old_scale.height * old_scale.height) //旋转半径
const angle_old = (Math.atan2(diff_rotate_y_old, diff_rotate_x_old) / Math.PI) * 180
const angle_new = (Math.atan2(diff_rotate_y_new, diff_rotate_x_new) / Math.PI) * 180
const rotate = angle_new - angle_old + old_rotate
editMask.rotate = rotate
const jiaodu = (Math.atan2(old_scale.height, old_scale.width) / Math.PI) * 180
const rotate_x = Math.cos((jiaodu - rotate) * (Math.PI / 180)) * distance_r
const rotate_y = Math.sin((jiaodu - rotate) * (Math.PI / 180)) * distance_r
// console.log('rotate:x:y', rotate, rotate_x, rotate_y)
editMask.rotateCenter.x = old_center_x + rotate_x / 2
editMask.rotateCenter.y = old_center_y - rotate_y / 2
// 计算收缩点位置
const shrink_x = Math.cos((jiaodu + rotate) * (Math.PI / 180)) * distance_r
const shrink_y = Math.sin((jiaodu + rotate) * (Math.PI / 180)) * distance_r
editMask.shrinkCenter.x = old_center_x + shrink_x / 2
editMask.shrinkCenter.y = old_center_y + shrink_y / 2
// 删除控制器的位置
editMask.deteleCenter.x = old_center_x - shrink_x / 2
editMask.deteleCenter.y = old_center_y - shrink_y / 2
editMask.start.x = current_x
editMask.start.y = current_y
// console.log('this.editMask.scale:', editMask.shrinkCenter.x, editMask.shrinkCenter.y, editMask.deteleCenter.x, editMask.deteleCenter.y)
}
this.addMaskList[i] = editMask
},
