我有一个浏览器应用程序，可以在图像上放置一组裁剪标记。裁剪标记为 100 像素 x 100 像素，为黑色，在右上角和左下角形成一个角。裁剪标记从图像的右上角和左下角开始，然后可以独立拖动（在 iPad 上的 Mobile Safari 上尝试此操作）。拖动事件将通过 PageX 和 PageY 告诉我元素在哪里。我注意到两件事，虽然我不明白。
对于初学者来说，一旦我触摸一个裁剪标记，它就会跳到我手指下方约 100 像素，所以我从上方移动它。
其次，当我得到拖动事件，特别是在我的手指抬起之前的最后一个事件时，我不确定它在哪里计算 PageX 和 PageY。我需要确定这两个裁剪标记的角在哪里，以便确定裁剪区域的位置和尺寸。我不知道它是否根据我的手指在哪里计算位置，以及我是否可以确定角落在哪里。
有任何想法吗？
谢谢！
<!DOCTYPE html>
<html>
<head>
<title>Gestures</title>
<link rel="stylesheet" href="resources/css/main.css">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, height=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" src="resources/js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="resources/js/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/jquery.event.drag.min.js"></script>
<!--script src="resources/js/prototype.js" type="text/javascript"></script-->
<script type="text/javascript">
var ll_curX = 50;
var ll_curY = 285;
var ur_curX = 350;
var ur_curY = 60;
$(function ()
{
$('#ur_corner').bind('drag', function (event)
{
curX = event.pageX;
curY = event.pageY;
offsetX = curX - ur_curX;
offsetY = curY - ur_curY;
document.all.log.innerHTML += "...Drag curX = " + curX + ", curY = " + curY + ", offX = " + offsetX + ", offY = " + offsetY + "...</br>";
var $this = $(this);
$(this).css({
left: (event.pageX-100) + 'px',
top: (event.pageY) + 'px'
});
//ur_curX = event.pageX;
//ur_curY = event.pageY;
ur_curX = curX + offsetX;
ur_curY = curY + offsetY;
//document.all.log.innerHTML += "...Drag left = " + event.pageX + ", top = " + event.pageY + "...</br>";
});
});
$(function ()
{
$('#ll_corner').bind('drag', function (event)
{
curX = event.pageX;
curY = event.pageY;
offsetX = curX - ll_curX;
offsetY = curY - ll_curY;
var $this = $(this);
$(this).css({
left: (event.pageX) + 'px',
top: (event.pageY-100) + 'px'
});
//ll_curX = event.pageX;
//ll_curY = event.pageY;
ll_curX = curX + offsetX;
ll_curY = curY + offsetY;
//document.all.log.innerHTML += "...Drag left = " + event.pageX + ", top = " + event.pageY + "...</br>";
});
});
$(function ()
{
$('#cropButton').bind('click', function(event)
{
crop_id = "crop";
img_id = "page";
x = ll_curX;
y = ur_curY;
width = ur_curX - 50; // - ll_curX;
height = ll_curY - ur_curY;
document.all.log.innerHTML += "...Crop ll_curyY = " + ll_curY + ", ur_curY = " + ur_curY + "...</br>";
document.all.log.innerHTML += "...Crop x = " + x + ", y = " + y + ", width = " + width + ", height = " + height + "...</br>";
$('#crop').html('<img id="crop_img" src="resources/images/cervelor3.jpg" />');
$('#crop').css({
position: 'relative',
overflow: 'hidden'
});
//var scale_x = $('#crop').getWidth() / width;
//var scale_y = $('#crop').getHeight() / height;
document.all.log.innerHTML += "...Crop ll_curyY = " + ll_curY + ", ur_curY = " + ur_curY + "...</br>";
$('#crop_img').css({
position: 'absolute',
display: 'block',
left: x + 'px', //left: (-x * scale_x) + 'px',
top: y + 'px', //top: (-y * scale_y) + 'px',
width: width + 'px', //$('#page').getWidth() * scale_x) + 'px',
height: height + 'px' //($('#page').getHeight() * scale_y) + 'px'
});
/*
$(crop_id).update('<img id="' + crop_id + '_img" src="' +
$(img_id).getAttribute('src') + '" style="display:none" />');
var scale_x = $(crop_id).getWidth() / width;
var scale_y = $(crop_id).getHeight() / height;
$(crop_id).setStyle({
position: 'relative',
overflow: 'hidden'
});
$(crop_id + '_img').setStyle({
position: 'absolute',
display: 'block',
left: x + 'px', //left: (-x * scale_x) + 'px',
top: y + 'px', //top: (-y * scale_y) + 'px',
//width: width + 'px', //($(img_id).getWidth() * scale_x) + 'px',
height: height + 'px' //($(img_id).getHeight() * scale_y) + 'px'
});
//document.all.log.innerHTML += "...Crop left = " + x + ", top = " + y + ", scale_x = " + scale_x + ", scale_y = " + scale_y + "...</br>";
document.all.log.innerHTML += "...Crop height = " + height + ", width = " + width + "...</br>";
*/
});
});
</script>
</head>
<body>
<div id="container" style="width:800px; height:40px;">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Print Preview</h1>
</div>
<div id="preview" style="background-color:#FFD700;height:600px;width:400px;float:left;">
<div id="paper">
<!--div id="clipping" style="width:300px; height:225px"-->
<img id="page" src="resources/images/cervelor3.jpg" height="225px" width="300px">
<div id="clip">
<img id="ll_corner" src="resources/images/lowerleftcorner.png" height="100px" width="100px">
<img id="ur_corner" src="resources/images/upperrightcorner.png" height="100px" width="100px">
</div>
<!--/div-->
</div>
<div id = "buttonDiv">
<!-- Pass crop() the original image id, the id of the div to receive the crop, the left and top position of the
area to crop, then the width, and height of the crop -->
<button id="cropButton" type="button">Crop</button>
</div>
<div id="crop" style="width:300px; height:225px;">
<img src="resources/images/cervelor3.jpg" style="height:225px; width:300px;">
</div>
</div>
<div id="content" style="background-color:#EEEEEE;height:600px;width:400px;float:left;">
<h2>Print Settings</h2>
</br>
<label class=copies>Copies</label>
<textarea class="box" cols="1" rows="1">1</textarea>
</br></br></br>
<label class=duplex>2-Sided</label>
<textarea class="box" cols="1" rows="1">Off</textarea>
</br></br></br>
<label class=contrast>Contrast</label>
<input class=slider type="range" min="0" max="100" value="50" step="5"/>
<div id="log">
</div>
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">Copyright © 2012 www.hp.com</div>
</div>
<!-- div id="trace"></div> -->
<!-- div id="gesture" style="background:red;width:300px;height:300px;z-index:5000;position:absolute"><div> -->
</body>
</html>