怎么动态生成两点连线

kangbo818 2009-04-07 03:42:44
随意输入两点坐标，点击按钮，显示两点连线，两点以小图片显示，新手，最好贴出具体代码（带注释）
多谢！！！！
...全文
1013 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
kangbo818 2009-04-07
  • 打赏
  • 举报
 回复
多谢，呵呵，结账
一把编程的菜刀 2009-04-07
  • 打赏
  • 举报
 回复
汗！！
你是不是直接双击HTML文件浏览的？？

你要用IIS等服务器软件来浏览就不会提示你了
kangbo818 2009-04-07
  • 打赏
  • 举报
 回复
多谢大家，那个ie里的阻止脚本控件怎么去掉？代码里应该可以吧
一把编程的菜刀 2009-04-07
  • 打赏
  • 举报
 回复
http://college.sxhighway.gov.cn/document/2002100715475201899.htm

提供一个网上的
一把编程的菜刀 2009-04-07
  • 打赏
  • 举报
 回复
http://topic.csdn.net/t/20030713/10/2022085.html

其实论坛里也早就有提问过
kangbo818 2009-04-07
  • 打赏
  • 举报
 回复
多谢大家，我先研究下，不小心发了连个贴，愁死了，呵呵
一把编程的菜刀 2009-04-07
  • 打赏
  • 举报
 回复
虽然JS能做出来
但还是建议用VML

写一个不用VML实现的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">  

.style1 {  

    font-size: x-small; 

	height:200px;

	width:100%; 

}  

</style>  

<script>

function makedot(x,y){ //画点函数  

 document.getElementById('div').innerHTML=document.getElementById('div').innerHTML+"<div style='height:1px;position:absolute;left:"+x+"px;top:"+y+"px;width:1px;background:#f00;overflow:hidden'></div>";  

}  

/**  

 函数功能：根据两点坐标画直线。  

 函数思路：根据两点的坐标计算机斜率，然后根据第一个点坐标及斜率计算直线上所有点然后画线。垂直线特殊处理  

*/  

function line(x1,y1,x2,y2){  

 var slope=(y2-y1)/(x2-x1); //斜率  

 var diff=x2-x1;  

 if(x1<x2){  

  for(var i=0;i<diff;i++){  

   makedot(x1+i,y1+slope*i);  

  }  

 }else if(x1>x2){  

  for(var i=0;i>diff;i--){  

   makedot(x1+i,y1+slope*i);  

  }  

 }else{ //画垂直线  

  var temp=y2-y1;  

  if(temp>0){  

   for(var i=0;i<temp;i++){  

    makedot(x1,y1+i);  

   }  

  }else{  

   for(var i=0;i>temp;i--){  

    makedot(x1,y1+i);  

   }  

  }  

 }  

}  

function createline()

{

	if(document.form1.AX.value!=""&&document.form1.AY.value!=""&&document.form1.BX.value!=""&&document.form1.BY.value!="")

	{

	line(document.form1.AX.value,document.form1.AY.value,document.form1.BX.value,document.form1.BY.value)	

	}

}

</script>

</head>



<body>

<span class="style1" id="div"> 

</span>

<div>

<form name="form1" method="post" action="">

A点X:

  <input name="AX" type="text" id="AX" />

  Y:<input name="AY" type="text" id="AY" /><br />

B点X:

  <input name="BX" type="text" id="BX" />

  Y:<input name="BY" type="text" id="BY" /><br />

  <input name="ok" type="button" id="ok" onclick="createline()" value="画线" />

<input name="提交" type="submit" value="提交" />

</form>

</div>

</body>

</html>
hongqi162 2009-04-07
  • 打赏
  • 举报
 回复 


参考

<html>

<head>

<script Language="javascript">

function drawDot(x,y,color,size)

{

  document.write("<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+color+"' width="+size+" height="+size+"></td></tr></table>");

}

function drawLine(x1,y1,x2,y2,color,size,style)

{

  var i;

  var r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)));

  var theta=Math.atan((x2-x1)/(y2-y1));

  if(((y2-y1)<0&&(x2-x1)>0)||((y2-y1)<0&&(x2-x1)<0))

  {

   theta = Math.PI + theta;

  }

  var dx=Math.sin(theta);

  var dy=Math.cos(theta);

  for(i=0;i<r;i++){

    switch(style){

      case 0:

        drawDot(x1+i*dx,y1+i*dy,color,size);

        break;

      case 1:

        i+=size*2;

        drawDot(x1+i*dx,y1+i*dy,color,size);

        break;

      case 2:

        if(Math.floor(i/4/size)%2==0){

          drawDot(x1+i*dx,y1+i*dy,color,size);

        }

        else{

            i+=size*2;

            drawDot(x1+i*dx,y1+i*dy,color,size);

        }

        break;

      default:

        drawDot(x1+i*dx,y1+i*dy,color,size);

        break;

    }

  }

}



function drawFilledRect(x1,y1,x2,y2,color)

{

  document.write("<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: absolute; left: "+(x1)+"; top: "+(y1)+";background-color: "+color+"' width="+(x2-x1)+" height="+(y2-y1)+"></td></tr></table>");

}

function drawRect(x1,y1,x2,y2,color,size,style)

{

  drawLine(x1,y1,x2,y1,color,size,style);

  drawLine(x1,y2,x2,y2,color,size,style);

  drawLine(x1,y1,x1,y2,color,size,style);

  drawLine(x2,y1,x2,y2,color,size,style);

}

function drawOval(x,y,a,b,color,size,precision)

{

  var i;

  var iMax=2*Math.PI;

  var step=2*Math.PI/(precision*Math.sqrt(a*b)*4.5);

  for(i=0;i<iMax;i+=step)

  {

    drawDot(x+a*Math.cos(i),y+b*Math.sin(i),color,size);

  }

}

function drawPoly(x,y,r,n,color,size,style)

{

  var i;

  var theta=Math.PI;

  var x1=x,y1=y-r,x2,y2;

  for(i=0;i<n;i++)

  {

    theta-=(2*Math.PI/n);

    x2=x+r*Math.sin(theta);

    y2=y+r*Math.cos(theta);

    drawLine(x1,y1,x2,y2,color,size,style);

    x1=x2;

    y1=y2;

  }

}

</script>

</head>

<body>

<script Language="javascript">

drawLine(20,20,300,20,"#0000cc",2,0);

drawLine(20,40,300,40,"#0000cc",2,1);

drawLine(20,60,300,60,"#0000cc",2,2);

drawFilledRect(20,80,300,200,"009900");

drawRect(20,220,220,320,"ff0000",2,0);

drawRect(240,220,440,320,"ff0000",2,1);

drawRect(460,220,660,320,"ff0000",2,2);

drawOval(250,450,120,50,"006600",1,1);

drawOval(250,650,120,120,"006600",2,0.5);

drawPoly(200,900,100,3,"ff8800",2,0);

drawPoly(400,900,100,4,"ff8800",2,1);

drawPoly(600,900,100,5,"ff8800",2,2);

drawPoly(200,1100,100,6,"ff8800",2,0);

drawPoly(400,1100,100,7,"ff8800",2,1);

drawPoly(600,1100,100,12,"ff8800",2,2);

</script>

</body>

</html>
囧 2009-04-07
  • 打赏
  • 举报
 回复
我以前做的，画线没什么问题．是用１像素的点连起来的



<html>

<head>

<title>Tetris</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<style type="text/css">

 html, body{}{margin:0px;}

 #test{}{

  position:absolute; left:500px; top:50px;

  width:10px; height:1px;

  font-size:1px;

  background:#FF0000;

  padding:0px;margin:0px;

  overflow:hidden;

 };

 .line{}{

  position:absolute; overflow:hidden;font-size:1px; z-index:10;

 }

</style>

<script type="text/javascript">

 

 function EasyDraw(){

  this.out = document.createElement("div");

  this.out.style.position = "relative";

  //原点坐标;

  this.setOrigin(0, 0);

  

  document.body.appendChild(this.out);

  //

  this.size = 1;

  this.color = "#000090";

  //

  this.x = 0;

  this.y = 0;

  

 }

 EasyDraw.prototype = {

  setOrigin : function(x, y){

   this.originX = x;

   this.originY = y;

   this.out.style.left = this.originX + "px";

   this.out.style.top = this.originY + "px";

  },

  //添加HTML

  _inserthtml : function(obj, html){

   if(obj.insertAdjacentHTML){

    obj.insertAdjacentHTML("beforeEnd", html);

   }else{

    var range = obj.ownerDocument.createRange();

    if(obj.lastChild){

                    range.setStartAfter(obj.lastChild);

                    frag = range.createContextualFragment(html);

                    obj.appendChild(frag);

                }else{

                   obj.innerHTML += html;

                }

   }

  },

  _gethtml : function(x, y, wid, hei){

   var fillcolor = "", strResult;

   if(arguments.length > 4) 

    fillcolor = arguments[4];

   if(fillcolor == "")

   {

    //线

    if (wid==1 || hei == 1){

     strResult = "<div style='overflow:hidden;position:absolute;font-size:1px;left:" + x + "px;top:" + y + "px;width:" + wid + "px;height:" + hei + "px;background: " + this.color + ";'></div>";

    }else{ //矩形

     strResult = "<div style='overflow:hidden;position:absolute;font-size:1px;left:" + x + "px;top:" + y + "px;width:" + wid + "px;height:" + hei + "px;border:" + this.size + "px solid " + this.color + ";'></div>"; 

    }

   }

   else{ //fill

    strResult = "<div style='overflow:hidden;position:absolute;font-size:1px;left:" + x + "px;top:" + y + "px;width:" + wid + "px;height:" + hei + "px;border:" + this.size + "px solid " + this.color + ";background:"+ fillcolor+"'></div>";

   } 

   return strResult;

  },

  //设置线的大小

  setsize : function(size){

   this.size = size;

  },

  //设置线的颜色

  setcolor : function(color){

   this.color = color;

  },

  //画点

  setpixel : function(x, y){

   this._line(x, y, this.size, this.size);

  },

  dot : function(x, y){this.setpixel(x, y);},

  //画直线

  _line : function(x, y, wid, hei){

   this._inserthtml(this.out, this._gethtml(x, y, wid, hei));

  },

  //画直线

  _line2 : function(obj, x, y, wid, hei){

   obj.innerHTML += this._gethtml(x, y, wid, hei);

  },

  //画线 起始坐标x1, y1, 结束坐标 x2, y2

  line : function(x1, y1, x2, y2){

   var tmp;

   if(x1 > x2 ){

    tmp = x1;

    x1 = x2;

    x2 = tmp;

   }

   if(y1 > y2){

    tmp = y1;

    y1 = y2;

    y2 = tmp;

   }

   if(x1 == x2){ // |

    this._line(x1, y1, this.size, y2-y1 );

   }else if(y1 == y2){ // --

    this._line(x1, y1, x2-x1, this.size);

   }else{ //  or /

    var n = (x2-x1) / (y2-y1);

    var newDoc = document.createDocumentFragment();

    newDoc.innerHTML = "";

    if(n >= 1){

     var diff = x2 - x1;

     for(var i=0; i<diff; i++){

      this._line2(newDoc, x1 + i, y1 + parseInt(i/n), this.size, this.size);

     } 

    }else{

     var diff = y2 - y1;

     for(var i=0; i<diff; i++){

      this._line2(newDoc, x1 + parseInt(i*n), y1 + i, this.size, this.size);

     }

    }

    this._inserthtml(this.out, newDoc.innerHTML);

   }//end of if 

  },

  //移动光标

  moveTo : function(x, y){

   this.x = x;

   this.y = y;

  },

  //从开始光标画线

  lineTo : function(x, y){

   this.line(this.x, this.y, x, y);

   this.x = x;

   this.y = y;

  },

  //画矩形left, top, right, bottom

  //+1重载：第5个参数为填充颜色

  rect : function(l, t, r, b){

   var tmp, wid, hei;

   if(l>r){

    tmp=l;l=r;r=tmp;

   }

   if(t>b){

    tmp=t;t=b;b=tmp;

   }

   wid = r-l;

   hei = b-t; 

   if(arguments.length <= 4){

    this._inserthtml(this.out, this._gethtml(l, t, wid, hei));

   }else{ //fill

    this._inserthtml(this.out, this._gethtml(l, t, wid, hei, arguments[4]));

   }   

  },

  //画圆，速度比较慢, 盼高人给个高效的算法

  circle : function(x, y, r){

   var radio, xx, yy;

   var Pi = Math.PI;

   var newDoc = document.createDocumentFragment();

   newDoc.innerHTML = "";

   for(var i=0.0;i<360;i+=0.5){

    radio=i*Pi/180;

    xx=r * Math.cos(radio) + x;

    yy=r * Math.sin(radio) + y;

    this._line2(newDoc, xx, yy, this.size, this.size);

   }

   this._inserthtml(this.out ,newDoc.innerHTML);

  },

  toString : function(){ return this.out.innerHTML;},

  //清除

  clear : function(){ this.out.innerHTML = "";}

 }

</script>

</head>

<script type="text/javascript">

var oImg = null;

function $(o) {return document.getElementById(o);}

function DrawImage(){

 

 var now1 =new Date();

 var StarTime_S=now1.getTime();

 

 oImg = new EasyDraw();

 

 oImg.setOrigin(50,50);

 oImg.setpixel(50,50);

 oImg.dot(60,60);

 oImg.line(100, 100, 300, 100);

 oImg.setcolor("#009000");

 oImg.line(100, 100, 100, 300);

 oImg.setcolor("#900000");

 oImg.line(100,100,200,400);

 oImg.setcolor("#009090");

 oImg.line(100,100,400,200);

 oImg.rect(200,200,250,250);

 oImg.setcolor("#ff0000");

 oImg.rect(300,300,350,350, "#EEEEEE");

 //oImg.circle(200,200,100);

 oImg.moveTo(400,400);

 oImg.lineTo(400,500);

 oImg.lineTo(500,500);

 oImg.lineTo(500,400);

 

 var now2 =new Date();

 var EndTime_S=now2.getTime();

 $("showTime").innerHTML = (EndTime_S-StarTime_S)+"ms";

}

function Show(){

 $("divShow").style.display = "inline";

 $("txtShow").value = oImg.toString();  

 oImg.clear();

}

</script>

<body >

 <input type="button" name="btnStart" value=" 测试 " onClick="DrawImage()" />

 <input type="button" name="btnShow" value=" 查看 " onClick="Show()" />

 执行时间：<span id="showTime"></span>

 <br />

 <div id="divShow" style="display:none;">

  <textarea id="txtShow" rows="30" cols="100"></textarea>

 </div>

 <div id="test"></div>

</body>

</html>
luojihaidao 2009-04-07
  • 打赏
  • 举报
 回复
这种方法无能是那一方面我感觉不好。 只是提供一个思路。
kangbo818 2009-04-07
  • 打赏
  • 举报
 回复
大哥看你说得很简单啊，代码给写一下，这我写不出来啊，呵呵
是js
luojihaidao 2009-04-07
  • 打赏
  • 举报
 回复
用JS做？

那你就用1*1px的图片铺吧。

（x1,y1） (x2,y2); |x1-x2| |y1-y2| 求出直线公式，再平铺。

Activiti工作流高级视频教程
01-课程计划02-Activiti工作流概念（使用程序演示工作流执行）03-Activiti介绍04-准备Activiti开发环境05-准备开发环境（配置文件）和核心API的介绍06-Activiti入门程序HelloWorld演示流程的执行07-流程定义的CRUD(上)08-流程定义的CRUD(下)09-流程实例，任务，执行对象控制流程的执行(上)10-流程实例，任务，执行对象控制流程的执行(下)11-流程变量(上)12-流程变量(下)13-流程历史数据查询14-第一天知识点回顾15-连线16-排他网关17-并行网关18-流程实例开始结束19-接收任务活动（receiveTask）20-个人任务分配（三种方式）21-组任务分配（三种方式）22-工作流提供的用户角色组（IdentityService）23-项目框架搭建（Struts）24-请假流程管理系统框架搭建（Spring+Struts）25-请假流程图26-知识点回顾27-系统登录（Session）28-自定义拦截器实现Session验证29-部署流程定义（zip文件部署）30-流程定义和部署对象查询31-查看流程图和删除流程定义32-请假单业务的查询列表和新增保存33-请假单业务的编辑保存和删除34-申请请假（启动流程实例）35-查找正在执行的个人任务列表36-使用类动态指定下一个任务的办理人37-办理任务（获取任务节点form key中的值）38-办理任务（使用任务ID，查询请假单）39-办理任务（使用任务ID，查询任务完成后的连线名称集合）40-完成任务41-查询办理任务时操作的历史批注信息(上)42-查询办理任务时操作的历史批注信息(下)43-在请假单中查询历史批注信息（使用请假单ID查询）44-查看当前流程图和课程总结
HTML之动态点连线
每个点会随机进行移动，点移动到靠近的点之后，就会连接到这个点，以此类推。做一个动态点连线的效果。
Matlab plot画图学习---画点以及两点连线
1、点数据格式（编号    X坐标   Y坐标） 2、边数据格式（起始节点编号     终止节点编号） 3、实现效果：在图上描出各个点，并连接边。 4、代码实现 clear; clc; points = load('点的数据.txt');   %节点数据加载，存入points矩阵 lines = load('边数据.txt');    %边数据加载，存入lines矩阵 [x,y]=
opencv做两点间连线
OpenCV 中可以使用 cv2.line() 函数绘制两点间的连线。该函数的格式如下： cv2.line(img, pt1, pt2, color, thickness, lineType, shift) 其中： img：要绘制的图像 pt1：第一个点的坐标 pt2：第二个点的坐标 color：线段颜色(BGR) thickness：线段宽度 lineType：线段类型 shift：坐标整数化...
两点之间的连线java_两点成线（java初级）
此段代码略有难度，小伙伴们，可以自己尝试先做。实在不行，再来看代码。欢迎关注我嗷~。都说两点确定一条直线，那么设计一个直线类Line，需要通过两个点Point对象来确定。Line类具体要求如下：1)定义两个Point对象p1，p2；2)写出有参构造方法，传递两个对象值给p1，p23)为p1，p2写出setters，和getters方法4)为Line写出一个getLength方法求直线中两点的长度5...
JavaScript

87,910

社区成员

224,616

社区内容

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

加载中

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

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

+ 用AI写文章