Below is my code ... code seems messy so tell me my problem in my words.
I want to select cropping are through mouse. Its just Bottom-right corner of
box.
When I tried to resize selection area speedily, the selected area(crop box)
does not resize...
Why it behaves slow...? Can any GURU suggest...:working:
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery.min.js"></script>
<style>
.crop_box{
background-color: transparent;
zIndex:9;
position: absolute;
text-align: center;
vertical-align: middle;
border: 1px dashed grey;
}
</style>
<script>
var range = 15;
var mouse_down_flag=false;
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false;}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none";
else //All other route (ie: Opera)
target.onmousedown=function(){return false;}
target.style.cursor = "default";
}
function drawCropArea(canvas_id,x1,y1,x2,y2){
// $('#workarea').append('<div>hi</div>').css({height: '40px'});
$('<div id=crop_box> hehhehe;</div>').prependTo('#workarea');
$('#crop_box').addClass('crop_box');
$('#crop_box').css({width: '300px', height: '200px'});
} // end function
function mouseIsOnHandle(ex,ey){
var crop_pos = $('#crop_box').offset();
var handle_x = parseInt($('#crop_box').width() + crop_pos.left);
var handle_y = parseInt($('#crop_box').height() + crop_pos.top);
//var x2 = e.pageX;
//var y2 = e.pageY;
x2=ex;
y2=ey;
if( ((x2 - range) <= handle_x && handle_x <= (x2 + range)) &&
(
(y2-range) <= handle_y && handle_y <= (y2+range)) ){
return true;
}
return false;
} // end function
$(document).ready(function () {
var x1,x2,y1,y2,w,h;
//var src_image = document.getElementById("src_image");
disableSelection(document.body);
//disableSelection('src_image');
drawCropArea();
$('#workarea').mousedown(function(e){
mouse_down_flag=true;
x1 = e.pageX - this.offsetLeft;
y1 = e.pageY - this.offsetTop;
$("#x1").text( 'x1:' + x1 );
$("#y1").text( 'y1:' + y1 );
});
$('#workarea').mouseup(function(e){
if(mouse_down_flag){
x2 = e.pageX - this.offsetLeft;
y2 = e.pageY - this.offsetTop;
$("#x2").text( 'x2:' + x2 );
$("#y2").text( 'y2:' + y2 );
// now its time to draw a div on crop/selection area or
select area to
crop
}
// releases if uuser clicked outside of div/workarea first
mouse_down_flag=false;
});// End Mouse UP function
// calculating and saving right bottom position of crop box
$('#crop_box').mousemove(function(e){
// check if its just on the corner of the crop_box
// getting right bottom posistion always
if(mouse_down_flag){// resize crop_box with mouse move...
var crop_pos = $('#crop_box').offset();
$('#crop_box').width( e.pageX - crop_pos.left );
$('#crop_box').height(e.pageY - crop_pos.top);
}
var crop_pos = $('#crop_box').offset();
var handle_x = parseInt($('#crop_box').width() + crop_pos.left);
var handle_y = parseInt($('#crop_box').height() + crop_pos.top);
var x2 = e.pageX;
var y2 = e.pageY;
$("#x1").text( 'x1:' + handle_x );
$("#y1").text( 'y1:' + handle_y );
$("#x2").text( 'x2:' + x2 );
$("#y2").text( 'y2:' + y2 );
});
$('#crop_box').mousedown(function(e){
// check if its just on the corner of the crop_box
// getting right bottom posistion always
if( mouseIsOnHandle(e.pageX, e.pageY)){
mouse_down_flag=true;
}
});
$('#crop_box').mouseup(function(e){
if( mouse_down_flag ){
// reseizecropbox
mouse_down_flag=false;
}
});
});
</script>
</head>
<body>
<p>
Try scrolling too.
Move the mouse over the div.
</p>
<div id="workarea" style="border:1px solid black;margin: 0px; padding:0px;
padding-bottom:0px; text-align:center;width:600px;height:300px;">
bee.jpg </div>
</body>
</html>
--
View this message in context:
http://old.nabble.com/Crop-area-moving-slowly-when-expanding-tp27554446s27240p27554446.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
