选择矩形 [英] selection rectangle
问题描述
大家好，
这是一个小小的javascript，它给我鼠标'
x和y坐标。
现在，我希望能够在给定的图像上用选择（s）矩形
。
然后，保存选择的规格。
对于我现在看到的：主要问题是DOM兼容，
和浏览器兼容性。
你能帮忙/指点我吗？
提前谢谢，
Thom。
// -------------------------
//代码：
// -------------------------
< script type = "文本/ JavaScript的" language =" javascript">
<！ -
function twPositionRelative（evt）{
var nOffsetX;
var nOffsetY;
evt =（evt）？ evt：（（window.event）？window.event：""）;
if（evt）{
if（document.all）{
nOffsetX = evt.offsetX;
nOffsetY = evt.offsetY;
}
else if（document.getElementById）{
nOffsetX = evt.pageX - document.getElementById（" monImage"）。offsetLeft;
nOffsetY = evt.pageY - document.getElementById（" monImage"）。 offsetTop;
}
document.getElementById（" hTrace"）。innerHTML =" X：" + nOffsetX +" ; Y：
" + nOffsetY;
}
}
function twInit（）{
var oImage = document.getElementById（" monImage"）
if（oImage）{
oImage.style.cursor =" crosshair" ;
oImage.onmousemove = twPositionRelative
}
}
- >
< / script>
Hello everybody,
Here is a little javascript that gives me the mouse''s
x and y coordinates.
Now, i''d like to be able to make selection(s) rectangle(s)
on a given image with it.
And then, save the selection''s specs.
For what i''ve seen by now: the major problem is the DOM compliant,
and browsers compatibility.
Could you please help/point me out doing it?
thanks in advance,
Thom.
//-------------------------
//The Code:
//-------------------------
<script type="text/javascript" language="javascript">
<!--
function twPositionRelative(evt) {
var nOffsetX;
var nOffsetY;
evt = (evt) ? evt : ((window.event) ? window.event : "");
if (evt) {
if (document.all) {
nOffsetX = evt.offsetX;
nOffsetY = evt.offsetY;
}
else if (document.getElementById) {
nOffsetX = evt.pageX - document.getElementById("monImage").offsetLeft;
nOffsetY = evt.pageY - document.getElementById("monImage").offsetTop;
}
document.getElementById("hTrace").innerHTML = "X : "+nOffsetX+" ; Y :
"+nOffsetY;
}
}
function twInit() {
var oImage = document.getElementById("monImage")
if (oImage) {
oImage.style.cursor = "crosshair"
oImage.onmousemove = twPositionRelative
}
}
-->
</script>
推荐答案
thomaécrit：
thom a écrit :
大家好，
这是一个小小的javascript，它给我鼠标的x和y坐标。
Hello everybody,
Here is a little javascript that gives me the mouse''s
x and y coordinates.
看看这里：
http://perso.wanadoo.fr/stephane。 mor ... oord_carte.htm
看看我如何建议捕捉图像上的坐标
最好不要使用文件检测.all
因为不仅IE了解
为了得到你的选择，最简单的方法是连续两次点击
第一角度，然后是对角线。
就像我在这里一样：
http：// perso .wanadoo.fr / stephane.moriaux / truc / suisse /
（注意：未完成不要点击绿色按钮）
（页面中）法语，需要宽屏幕）
您也可以使用组合键来模拟套索？
你可以去这里：
http://www.walterzorn.com/dragdrop/dragdrop_e.htm
看看你的交易是否存在令人讨厌的事情。
-
Stephane Moriaux et son [moins] vieux Mac
have a look here :
http://perso.wanadoo.fr/stephane.mor...oord_carte.htm
to see how I propose to catch coordinates on an image
Preferably to do not use detection with document.all
because not only IE understand that
To get your selection, easiest way would be to use two successive clicks
1st angle, then oposite angle.
as I do here :
http://perso.wanadoo.fr/stephane.moriaux/truc/suisse/
(caution : not finished don''t click on green button)
(page in french, and wide screen needed)
You may too use a combination of keys to simulate the lasso ?
You could go here :
http://www.walterzorn.com/dragdrop/dragdrop_e.htm
to see if there is something interresting about your deal.
--
Stephane Moriaux et son [moins] vieux Mac
第一个merci beaucoup;）回答我这么快就这么对吧！
给定的链接是我的那种东西我希望这样做。
（ http ：//perso.wanadoo.fr/stephane.moriaux/truc/suisse/ ）
我要尝试让用户多次选择
在图片上，然后生成相应的地图。
ASM写道：
First merci beaucoup ;) answering me so fast and so right!
the given links are the kind of things i''m wishing to do.
(http://perso.wanadoo.fr/stephane.moriaux/truc/suisse/)
i''m gonna try to let user make multiple selections
on the picture, then generate the corresponding map.
ASM wrote :
最好不要使用document.all
因为不仅IE了解
Preferably to do not use detection with document.all
because not only IE understand that
你是对的，一个类似的脚本（基于我在
第一篇文章中给定的一个）没有''在所有浏览器中都能正常工作
添加选择矩形funcs（特别是Mac的游猎之旅
，如果我没记错的话）。
Thom 。
you''re right, a similar script (based on the given one in my
first post) doesn''t work properly in all browsers when
adding the selection rectangle funcs (especially Mac''s safari
if i remember right).
Thom.
thomaécrit：
thom a écrit :
第一个merci beaucoup;）快速回答我这么正确！
给定链接是我想要做的事情。
（http://perso.wanadoo.fr/stephane.moriaux/truc/suisse/ ）
我将尝试让用户在图片上进行多项选择，然后生成相应的地图。
这个例子基本上是为了让几个地区的人们联系起来，并且稍微简化了一个区域（为了进入一个新的页面
这个区域更高的尺寸（套房envenven ...））
而不是开始一个新的选择你只需要：
- 验证工作选择
- 在保留旧工作的同时开始新工作。
验证可以存储在一个数组中。
a类似的脚本（根据我在
第一篇文章中给出的一个）在添加选择矩形函数（特别是Mac'的safari
First merci beaucoup ;) answering me so fast and so right!
the given links are the kind of things i''m wishing to do.
(http://perso.wanadoo.fr/stephane.moriaux/truc/suisse/)
i''m gonna try to let user make multiple selections
on the picture, then generate the corresponding map.
This example was basically to get several areas cooordinates
and was a little simplified to one area (in order to go to a new page
with this area taller re-sized (suite en devenir ...) )
Instead to begin a new fresh selection you just need :
- to validate the onwork selection
- to begin a new one while keeping the old one.
Validations could be stocked in an array.
a similar script (based on the given one in my
first post) doesn''t work properly in all browsers when
adding the selection rectangle funcs (especially Mac''s safari
if i remember right).
如果它在第一点工作则必须使用第二点。
我会做那样的事情：
- 图像来映射
- 隐藏的div带边框和透明背景图像
带onclick选择这个div的功能
- a套索功能类似于我给出的例子
第一次点击：第一点和股票变量
第二次点击或双击：第二点库存
然后：
- 克隆上面隐藏的div
- 给它正确的大小和位置（从库存）
- 给它一个id和能见度
- 最终给它一个标题或/和一个链接
- 也许是为了存储一个必要的数组
- 点击这个新的div：函数重新安排它？
- 一个验证完整地图的按钮
来创建所有这些克隆的HTML代码
（在这个克隆的集合上使用循环
，结果在textarea中随后复制其内容）
-
Stephane Moriaux et son [moins] vieux Mac
if it works on 1st point it would have to work with 2nd point.
I would do something like that :
- image to map
- a hidden div with border and transparent background-image
with a onclick function to select this div
- a lasso function similar that I have on given example
on 1st click : 1st point and stock in a variable
on 2nd click or double-click : 2nd point stocked
then :
- cloning hidden div above
- giving it correct size and place (from stock)
- giving it an id and visibility
- eventualy to give it a title or/and a link in accordance
- perhaps to stock all necessary in an array
- when clicking on this new div : function to re-arrange it ?
- a button to validate the complete map
to create html code of all this clones
(using a loop on collection of this clones
with result in a textarea to afterward copy its content)
--
Stephane Moriaux et son [moins] vieux Mac
这篇关于选择矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
