画像の上に一連のクロップ マークを配置するブラウザー アプリがあります。クロップ マークは 100px x 100px で、右上と左下に角を形成する黒です。クロップ マークは画像の右上と左下の境界線から始まり、個別にドラッグできます (iPad の Mobile Safari で試してみてください)。ドラッグ イベントは、PageX と PageY を介して要素の場所を教えてくれます。私は理解していませんが、2つのことに気づいています。
まず、クロップマークに触れると、指の下約100pxにジャンプするので、上から移動します.
第 2 に、ドラッグ イベント、特に指を離す前の最後のイベントを取得すると、PageX と PageY がどこで計算されているのかわかりません。トリミングされた領域の位置と寸法を判断できるように、これら 2 つのトリミング マークの角がどこにあるかを判断する必要があります。指の位置に基づいて位置を計算しているかどうか、角がどこにあるかを判断できるかどうかはわかりません。
何か案は?
ありがとう!
<!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>