要在客户端时时画矩形、圆形，该怎么办

djhfw1000 2004-10-21 11:34:16
是不是要放什么控件上去
...全文
193 16 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
djhfw1000 2004-10-22
  • 打赏
  • 举报
 回复
up
djhfw1000 2004-10-22
  • 打赏
  • 举报
 回复
还不行
1、如果已经有jpg文件作为底图的话，就会出现不能实时出现矩形框的问题

2、圈选没实现
djhfw1000 2004-10-22
  • 打赏
  • 举报
 回复
用VML，会有jpg文件作为底图的话，就会出现不能实时显示拖拉矩形框的问题
djhfw1000 2004-10-22
  • 打赏
  • 举报
 回复
俺的要求个看来是高了一点，其实我在做一个webgis的东西，底图就是地图一个gif图，框选、圈选功能都做了，可是总要有客户端框选、圈选的效果吧，搞了几天搞不定

总体分析了一下几种方案，都有缺陷
1、DirectAnimation，有两种windows自带控件可用，是最有可能实现效果的，但由于缺少资料，工作无法展开（微软97年的技术，98年被微软淘汰）
2、applet技术，问题是客户端要不要下载控件的，还有速度可能会比较慢
3、VML技术，有图片做底图的时候，会出现无法实时呈现拖拉边框的情况
4、其他用HTML结合javascript的虚拟技术，也是有图片做底图的时候，会出现无法实时呈现拖拉边框的情况
djhfw1000 2004-10-22
  • 打赏
  • 举报
 回复
用VML会有这样的问题：有图片做底图的时候，会出现无法实时呈现拖拉边框的情况
clarass 2004-10-22
  • 打赏
  • 举报
 回复
用vml啊
孟子E章 2004-10-22
  • 打赏
  • 举报
 回复
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

JavaScript
Draw Line, Circle, Ellipse (Oval), Polyline, Polygon, Rectangle
djhfw1000 2004-10-22
  • 打赏
  • 举报
 回复
用VML也会有jpg文件作为底图的话，就会出现不能实时显示矩形框的问题
JasonJHu 2004-10-22
  • 打赏
  • 举报
 回复
用VML或者SVG
satans18 2004-10-21
  • 打赏
  • 举报
 回复
好东西~~
micker 2004-10-21
  • 打赏
  • 举报
 回复
呵呵，收藏！
meizz 2004-10-21
  • 打赏
  • 举报
 回复
<html>
<head>
<title>JavaScript绘图</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
IE4 = ! (navigator.appVersion.charAt(0) < "4" || navigator.appName == "Netscape")

var xo=0
var yo=0
var Ox = -1
var Oy = -1

var rad = Math.PI/180
var maxY = 400
var color = "red"

function print(str){document.write(str);}
function orgY(y){return maxY-y}
function outPlot(x,y,w,h) {print('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>');}
function Plot(x,y) {
outPlot(x,y,1,1)
if(Ox>=0 || Oy>=0) {
ShowLine(Ox,Oy,x-Ox,y-Oy)
}
Ox = x
Oy = y
}
function ShowLine(x,y,w,h) {
if(w<0) {
x += w
w = Math.abs(w)
}
if(h<0) {
y += h
h = Math.abs(h)
}
if(w<1) w=1
if(h<1) h=1
outPlot(x,y,Math.round(w),Math.round(h))
}
function LineTo(x,y) {
Line(xo,yo,x,y)
}
function sign(n) {
if(n>0)
return 1
if(n<0)
return -1
return n
}
function Line(x1,y1,x2,y2) {
x2 = Math.round(x2)
y2 = Math.round(y2)
xo = x2
yo = y2
y1 = orgY(y1)
y2 = orgY(y2)
var str = ""
var i=0
var x = x1
var y = y1
dx = Math.abs(x2-x1)
dy = Math.abs(y2-y1)
s1 = sign(x2-x1)
s2 = sign(y2-y1)
if(dx==0 || dy==0) {
ShowLine(x1,y1,x2-x1,y2-y1)
return
}
if(dx>dy) {
temp = dx
dx = dy
dy = temp
key = 1
}
else
key = 0
e = 2*dy-dx
for(i=0;i<dx;i++) {
px = 0
py = 0
Plot(x,y)
while(e>=0) {
if(key==1) {
x += s1
px += s1
}
else {
y += s2
py += s2
}
e = e-2*dx
}
if(key==1)
y += s2
else
x += s1
e = e+2*dy
}
}

function MoveTo(x,y) {Ox = Oy = -1;xo = Math.round(x);yo = Math.round(y);}

// 圆
function Cir(x,y,r) {MoveTo(x+r,y);
for(i=0;i<=360;i+=5) {LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y);}
}
// 弧形
function Arc(x,y,r,a1,a2) {MoveTo(r*Math.cos(a1*rad)+x,r*Math.sin(a1*rad)+y);
for(i=a1;i<=a2;i++) {LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)}
}
// 扇形
function Pei(x,y,r,a1,a2) {MoveTo(x,y);
for(var i=a1;i<=a2;i++) {LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y);}
LineTo(x,y);
}
// 弹出扇形
function PopPei(x,y,r,a1,a2) {
dx = r*Math.cos((a1+(a2-a1)/2)*rad)/10
dy = r*Math.sin((a1+(a2-a1)/2)*rad)/10
x += dx
y += dy
MoveTo(x,y)
for(var i=a1;i<=a2;i++) {
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
LineTo(x,y)
}

// 矩形
function Rect(x,y,w,h) {MoveTo(x,y);LineTo(x+w,y);
LineTo(x+w,y+h);LineTo(x,y+h);LineTo(x,y);
}

// 准星
function zhunxing(x,y) {
var ox = xo
var oy = yo
var oColor = color
color = "#000000"
Line(x-5,y,x+6,y)
Line(x,y-6,x,y+5)
print('<span style="position:absolute;font-size:10pt;left:'+(x+5)+';top:'+orgY(y+5)+';">['+x+','+y+']</span>')
color = oColor
xo = ox
yo = oy
}
// 标注
function biaozhuStr(x,y,s) {
return '<span style="position:absolute;font-size:10pt;left:'+x+';top:'+orgY(y)+';">'+s+'</span>'
}
function biaozhu(x,y,s,t) {
var ox = xo
var oy = yo
var oColor = color
point = "p01.gif"
if(t==1) {
print(biaozhuStr(x-5,y+6,"·"+s))
}
if(t==2) {
print(biaozhuStr(xo+x*Math.cos(y*rad)-10,yo+x*Math.sin(y*rad),s))
}
color = oColor
xo = ox
yo = oy
}
</script>
</head>

<body>
<table border="0" width="100%">
<tr>
<td width="100%" style="font-size: 18pt; color: #FF0000" class="t1">JavaScript绘图</td>
</tr>
<tr>
<td width="100%" style="font-size: 12pt; color: #008000" class="t2">
如果需要在网页上提供图形化的资料，通常是将其制作成图片，但这样一来网络上的开销就太大了。有什么办法呢？这里向你提供一组JavaScript函数，来解决这一问题。虽然简单了点，但是对画点线图来说还是绰绰有余的！</td>
</tr>
</table>

<script>
if(IE4) {

// 基本图形
color = "maroon"
Cir(50,40,20)
Arc(100,40,20,60,120)
Pei(150,60,40,240,300)
Rect(200,20,40,40)

// 折线图
color = "#FF0000"
var jd = new Array(
203,232,277,223,271,234,273,284,276,250,267,280
)
MoveTo(30,jd[0]-40)
biaozhu(xo,yo,jd[0])
for(i=1;i<jd.length;i++) {
LineTo(i*30+30,jd[i]-40)
biaozhu(xo,yo,jd[i],1)
}
color = "#C0C0C0"
Line(30,140,i*30+30,140)
Line(30,140,30,260)

// 饼图
color = "#00FF00"
var gc = new Array(
150,120,200,180,180
)
var s = 0
var m = 0
var n = 0
for(i=0;i<gc.length;i++) {
s +=gc[i]
if(gc[i] > m) {
m = gc[i]
n = i
}
}
var k = s/360
var mm = 0
var a =0
for(i=0;i<gc.length;i++) {
b = Math.round((gc[i]+mm)/k)
if(i==n)
PopPei(600,150,100,a,b)
else
Pei(600,150,100,a,b)
biaozhu(60,a+(b-a)/2,Math.round(gc[i]/s*100)+"%",2)
mm = mm+gc[i]
a = b
}

// 十字标注
MoveTo(280,20)
zhunxing(xo,yo)

}else {
document.write("<p> </p><table bgcolor=#FF0000><tr><td><font color=#FFFF00>对不起！您的浏览器不能支持该页的某些功能，请换用IE4.0以上版本的浏览器！谢谢！</font></td></tr></table>")
}
</script>

</body>
</html>
lfeng273 2004-10-21
  • 打赏
  • 举报
 回复
多谢高人ouyld指点迷津!!!
ouyld 2004-10-21
  • 打赏
  • 举报
 回复
<html>
<head>
<title> 鼠标选取框 </title>
<script language="JavaScript">
var x0;
var y0;
var select=false;

function document.onmousedown()
{
x0=document.body.scrollLeft+event.clientX;// 鼠标起始横坐标
y0=document.body.scrollTop+event.clientY;// 鼠标起始纵坐标
select=true;
}

function document.onmouseup()
{
select=false;
}

function document.onselectstart()
{
return false;
}

function document.ondrag()
{
return false;
}

function document.onmousemove()
{
if (select)
{
dd.style.display='';// 如果鼠标已经正确移动，将层设置为可视。
if(document.body.scrollLeft+event.clientX-x0>0) // 从左向右
{
dd.style.left=x0;
dd.style.width=document.body.scrollLeft+event.clientX-x0;
}
else // 从右向左
{
dd.style.left=document.body.scrollLeft+event.clientX;
dd.style.width=x0-(document.body.scrollLeft+event.clientX);
}
if (document.body.scrollTop+event.clientY-y0>0)// 从上向下
{
dd.style.top=y0;
dd.style.height=document.body.scrollTop+event.clientY-y0;
}
else// 从下向上
{
dd.style.top=document.body.scrollTop+event.clientY;
dd.style.height=y0-(document.body.scrollTop+event.clientY);
}
}
}
</script>
</head>

<body>
<table id="dd" style="position:absolute; width:0px; height:0px; z-index:99; border:1px black dashed; display:none;"><tr><td></td></tr></table>
</body>
</html>
vc_pioneer 2004-10-21
  • 打赏
  • 举报
 回复
使用vml
djhfw1000 2004-10-21
  • 打赏
  • 举报
 回复
还不行，要动态的，就是说矩形和圆形是要让客户自己拖出来的
WPF 实现的画图程序，支持线、矩形、圆、多边形橡皮筋
该应用的核心功能是允许用户进行基本的图形绘制，包括画线、绘制矩形、圆形以及利用橡皮筋工具来创建和调整多边形。橡皮筋工具通常指的是在拖动鼠标时能实时预览形状或线条的动态效果，直到松开鼠标才完成绘制。 **...
设计模式画图程序
设计模式画图程序 ...该系统可以实现基本图形的绘制功能，例如圆形、矩形和按钮等，并且可以实现图形的操作（如选取、移动、放大、缩小、改变颜色、改变线形等）和持久化（利用文件或利用数据库）。
inshape:Miro插件，用于将PNGJPEG图转换为彩色形状和文本。 与图像处理和OCR Javascript客户端库一起使用
orange_circle: :yellow_circle:一个Miro插件，用于将PNG / JPEG图转换为彩色形状和文本它通过Javascript客户端库使用图像处理和OCR特征三个主要功能是形状识别，即获取感兴趣区域（ROI）并告诉它是矩形还是圆形颜色...
免费PDF控件Spire.PDF
Spire.PDF for .NET 适合应用于所有常见的坏境中，比如：创建好的PDF文档可以存到磁盘中， 还可以在Windows Forms应用程序，ASP.NET 应用程序客户端浏览器中保存为数据流。 Spire.PDF for .NET 功能丰富。 除了基本...
WebcamObjectDetector
网络摄像头对象检测器 ... 另外，该程序的作用类似于服务器，因此客户端可以连接到该程序并获取检测到的信息。 开发环境 语言：Java OpenCV版本：3.4.0 IDE：Eclipse Oxygen.2版本（4.7.2） json：json-simple-1.1.1
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章