极客观点
项目管理
HarmonyOS
正在使用JS写一个拍照截取部分图片上传的功能，但是现在想让手机端也能够拖拽截图框。不知道如何让鼠标的点击事件转换为触摸屏的touch事件
var startDrag = function (point, target, kind) {
//point是拉伸点，target是被拉伸的目标，其高度及位置会发生改变
//此处的target与上面拖拽的target是同一目标，故其params.left,params.top可以共用，也必须共用
//初始化宽高
params.width = getCss(target, "width");
params.height = getCss(target, "height");
//初始化坐标
if (getCss(target, "left") !== "auto") {
params.left = getCss(target, "left");
}
if (getCss(target, "top") !== "auto") {
params.top = getCss(target, "top");
}
//target是移动对象
point.onmousedown = function (event) {
params.kind = kind;
params.flag = true;
clickFlag = true;
if (!event) {
event = window.event;
}
var e = event;
params.currentX = e.clientX; //鼠标按下时坐标x轴
params.currentY = e.clientY; //鼠标按下时坐标y轴
/*console.log('params.currentX=', params.currentX);
console.log('params.currentY=', params.currentY);*/
//防止IE文字选中，有助于拖拽平滑
point.onselectstart = function () {
return false;
};
document.onmousemove = function (event) {
let e = event ? event : window.event;
clickFlag = false;
if (params.flag) {
var nowX = e.clientX; // 鼠标移动时x坐标
var nowY = e.clientY; // 鼠标移动时y坐标
var disX = nowX - params.currentX; // 鼠标x方向移动距离
var disY = nowY - params.currentY; // 鼠标y方向移动距离
if (params.kind === "n") {
//上拉伸
//高度增加或减小，位置上下移动
target.style.top = parseInt(params.top) + disY + "px";
target.style.height = parseInt(params.height) - disY + "px";
} else if (params.kind === "w") { //左拉伸
target.style.left = parseInt(params.left) + disX + "px";
target.style.width = parseInt(params.width) - disX + "px";
} else if (params.kind === "e") { //右拉伸
target.style.width = parseInt(params.width) + disX + "px";
} else if (params.kind === "s") { //下拉伸
target.style.height = parseInt(params.height) + disY + "px";
} else if (params.kind === "nw") { //左上拉伸
target.style.left = parseInt(params.left) + disX + "px";
target.style.width = parseInt(params.width) - disX + "px";
target.style.top = parseInt(params.top) + disY + "px";
target.style.height = parseInt(params.height) - disY + "px";
} else if (params.kind === "ne") { //右上拉伸
target.style.top = parseInt(params.top) + disY + "px";
target.style.height = parseInt(params.height) - disY + "px";
target.style.width = parseInt(params.width) + disX + "px";
} else if (params.kind === "sw") { //左下拉伸
target.style.left = parseInt(params.left) + disX + "px";
target.style.width = parseInt(params.width) - disX + "px";
target.style.height = parseInt(params.height) + disY + "px";
} else if (params.kind === "se") { //右下拉伸
target.style.width = parseInt(params.width) + disX + "px";
target.style.height = parseInt(params.height) + disY + "px";
} else { //移动
target.style.left = parseInt(params.left) + disX + "px";
target.style.top = parseInt(params.top) + disY + "px";
}
}
document.onmouseup = function () {
params.flag = false;
if (getCss(target, "left") !== "auto") {
params.left = getCss(target, "left");
}
if (getCss(target, "top") !== "auto") {
params.top = getCss(target, "top");
}
params.width = getCss(target, "width");
params.height = getCss(target, "height");
/*console.log('params.width=', params.width);
console.log('params.height', params.width);*/
//给隐藏文本框赋值
posX = parseInt(target.style.left);
posY = parseInt(target.style.top);
cropW = parseInt(target.style.width);
cropH = parseInt(target.style.height);
if (posX < 0) {
posX = 0;
}
if (posY < 0) {
posY = 0;
}
if ((posX + cropW) > iCurWidth) {
cropW = iCurWidth - posX;
}
if ((posY + cropH) > iCurHeight) {
cropH = iCurHeight - posY;
}
//赋值
ID("cropPosX").value = posX;
ID("cropPosY").value = posY;
ID("cropImageWidth").value = parseInt(ID("zxxCropBox").style.width);
ID("cropImageHeight").value = parseInt(ID("zxxCropBox").style.height);
/*console.log('posX=',posX);
console.log('posY=',posY);*/
};
}
};
};
//绑定拖拽
startDrag(ID("zxxDragBg"), ID("zxxCropBox"), "drag");
//绑定拉伸
startDrag(ID("dragLeftTop"), ID("zxxCropBox"), "nw");
startDrag(ID("dragLeftBot"), ID("zxxCropBox"), "sw");
startDrag(ID("dragRightTop"), ID("zxxCropBox"), "ne");
startDrag(ID("dragRightBot"), ID("zxxCropBox"), "se");
startDrag(ID("dragTopCenter"), ID("zxxCropBox"), "n");
startDrag(ID("dragBotCenter"), ID("zxxCropBox"), "s");
startDrag(ID("dragRightCenter"), ID("zxxCropBox"), "e");
startDrag(ID("dragLeftCenter"), ID("zxxCropBox"), "w");
//图片不能被选中，目的在于使拖拽顺滑
ID("myCanvas").onselectstart = function () {
return false;
};
img.onselectstart = function () {
return false;
};
});尝试过论坛里一些大佬的转换函数，但是均无果。
不太明白转换是啥意思。
不是应该先识别当前是 手机端还是电脑端
手机端直接使用 touch touchMove touched 这些方法就好了吗