我有一个浏览器应用程序，可以在图像上放置一组裁剪标记。裁剪标记为100px x 100px，黑色在右上角和左下角形成一个角。裁剪标记从图像的右上角和左下边框开始，然后可以单独拖动（在Mobile Safari中的iPad上尝试）。拖动事件将通过PageX和PageY告诉我元素所在的位置。虽然我不明白，但我注意到了两件事。
对于初学者，一旦我触摸裁剪标记，它会跳到我手指下方大约100px处，所以我从上方移动它。
其次，当我得到拖动事件，尤其是在我的手指抬起之前的最后一个事件时，我不确定它在哪里计算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>