McKirahan wrote:
"Tomasz Bak" <op*******@wp.pl> wrote in message
news:dl**********@nemesis.news.tpi.pl...
Hello,
I have a simple problem: mark a list of defects
on an image.
I think the best way to do it is to select a single
deffect, then take two coordinates of coursor
form an image on a web page (first when user press
the button, and the second when he releases it).
Those two points are going to be send to the web
application (i.e. with AJAX) and saved in a database.
Later, I will use those points to render
the image with RMagic (drawing the lines and defects
list numbers on top of the image).
Any suggestions how to do it?
Even a chapter in a book, or enything
what could get me started is welcomed.
Best regards,
Tom
Will this help? Watch for word-wrap.
If the solution is only for browsers implementing the IE event model and
window properties, and if the position is to be relative to the entire
screen, then yes.
But if the solution needs to be cross-browser and the coordinates
relative to the image, the script below may suit better. Note that IE
does not include the default body padding/margin in the offset, so it
must be set to some value (say zero) or the element absolutely
positioned - otherwise the coordinates will be out by whatever the IE
default is (about left 13px and top 17px).
The following script it a quick hack from bits I had lying around: it
will only draw a box from top left to bottom right; boxes can extend
beyond the image; event capturing and handling is probably not optimal
(well, almost certainly not); /et al/.
Quite a bit of further development is required but it gives the OP some
idea of the scope of what is being attempted.
<div id="mBox" style="position: absolute; border: 2px solid red;
display: none;"></div>
<img src="a.jpg"
border="1" width="276" height="110" alt=""
onmousedown="DoMeasure.startMeasure(event, this)"
style="position: absolute; top: 100px; left: 100px;"><br>
<input type="button" value="Clear boxes"
onclick="DoMeasure.clearBoxes();">
<div id="msg"></div>
<script type="text/javascript">
var DoMeasure = ( function() {
var mBoxRoot = document.getElementById('mBox');
var Boxes = [];
var msgDiv = document.getElementById('msg');
var docBody = document.body || document.documentElement;
function startMeasure(e, el)
{
var cPos = getCursorPos(e);
var box = mBoxRoot.cloneNode(true);
Boxes[Boxes.length] = box;
box.style.display = '';
box.id = '';
box.style.left = cPos.x + 'px';
box.style.top = cPos.y + 'px';
docBody.appendChild(box);
var elPos = getElPos(el);
el.onmousemove = function() {stretchBox(e, cPos, box);}
el.onmouseup = stopMeasure;
// Event capture not need for 'zillas but important for IE
if ( el.captureEvents ) { // Capture events 'zillas
el.captureEvents(
Event.MouseDown | Event.MouseMove | Event.MouseUp
);
} else if ( el.setCapture ) { // Capture events IE
el.setCapture();
}
// Just for debug
msgDiv.innerHTML = (cPos.x - elPos.x)+', '+(cPos.y - elPos.y);
}
// Return the position of event (cursor)
function getCursorPos(e)
{
if (e.pageX || e.pageY) return {x:e.pageX, y:e.pageY};
if (e.clientX || e.clientY) {
return {x:e.clientX + document.body.scrollLeft,
y:e.clientY + document.body.scrollTop};
}
}
// Return the top left position of an element
function getElPos(el)
{
var pos = {x:0, y:0};
if (el.offsetParent){
while (el.offsetParent){
pos.x += el.offsetLeft;
pos.y += el.offsetTop;
el = el.offsetParent;
}
return pos;
}
if (el.x) return {x:el.x, y:el.y}
}
// Change the width & height of an element
function stretchBox(e, sPos, box)
{
var e = e || window.event;
var cPos = getCursorPos(e);
box.style.width = (cPos.x - sPos.x) + 'px';
box.style.height = (cPos.y - sPos.y) + 'px';
}
// Cancel mousemove & cleanup
function stopMeasure(e)
{
var e = e || window.event;
this.onmousemove = null;
if ( this.releaseEvents ) { // Release events & capture
this.releaseEvents(
Event.MouseDown | Event.MouseMove | Event.MouseUp
);
} else if ( this.releaseCapture ) {
this.releaseCapture();
}
var cPos = getCursorPos(e);
msgDiv.innerHTML += '<br>' + cPos.x + ', ' + cPos.y;
}
return ({
// Start measuring on mousedown
startMeasure :
function(e, el){
var e = e || window.event;
startMeasure(e, el);
},
// Delete measurement boxes
clearBoxes :
function(){
var i = Boxes.length;
while(i--) Boxes[i].parentNode.removeChild(Boxes[i]);
Boxes.length = 0;
}
});
})();
</script>
--
Rob
