<html>
<style type="text/css">
.draw-line{
font-size: 1px;
}
</style>
<body></body>
</html>
<script language="javascript">
var Line = function() {
var color = "#808080";
var pointArray = [];
var idocument = document;
var draw = {
// 画出最基本的图像，点，和垂直直线或水平直线
drawBase : function(x1, y1, w, h) {
try {
var span = idocument.createElement("span");
span.style.position = 'absolute';
span.style.left = x1;
span.style.top = y1;
span.style.height = h;
span.style.width = w;
span.style.background = color;
span.className = 'draw-line';
idocument.body.appendChild(span);
pointArray.push(span);
} catch (e) {
}
},
drawLine : function(x1, y1, x2, y2) {
var w = (((x2 - x1) == 0 ? 1 : (x2 - x1)));
var h = (((y2 - y1) == 0 ? 1 : (y2 - y1)));
if (x1 == x2 || y1 == y2) {
// 水平或垂直
var minX = (x1 < x2 ? x1 : x2);
var minY = (y1 < y2 ? y1 : y2);
draw.drawBase(minX, minY, Math.abs(w), Math.abs(h));
} else {// 斜线
var oldX = -1;
var oldY = -1;
var newX = 0;
var newY = 0;
if (Math.abs(w) > Math.abs(h)) {
for (var i = 0; i < Math.abs(w); i++) {
newX = (x1 + (w > 0 ? 1 : -1) * i);
newY = (y1 + (h > 0 ? 1 : -1) * Math.abs(i * h / w));
if (oldX != newX && oldY != newY) {
oldX = newX;
oldY = newY;
draw.drawBase(oldX, oldY, 1, 1)
}
}
} else {
for (var i = 0; i < Math.abs(h); i++) {
newX = (x1 + (w > 0 ? 1 : -1) * Math.abs(i * w / h));
newY = (y1 + (h > 0 ? 1 : -1) * i);
if (oldX != newX && oldY != newY) {
oldX = newX;
oldY = newY;
draw.drawBase(oldX, oldY, 1, 1)
}
}
}
}
},
drawArrowheaded : function(x0, y0, x1, y1) {// 箭头
var w = (((x1 - x0) == 0 ? 1 : (x1 - x0)));
var h = (((y1 - y0) == 0 ? 1 : (y1 - y0)));
var d = Math.sqrt((y1 - y0) * (y1 - y0) + (x1 - x0) * (x1 - x0));
var Xa = x1 + 10 * ((x0 - x1) + (y0 - y1) / 2) / d;
var Ya = y1 + 10 * ((y0 - y1) - (x0 - x1) / 2) / d;
var Xb = x1 + 10 * ((x0 - x1) - (y0 - y1) / 2) / d;
var Yb = y1 + 10 * ((y0 - y1) + (x0 - x1) / 2) / d;
draw.drawLine(x1, y1, Xa, Ya);
draw.drawLine(x1, y1, Xb, Yb);
},
drawArrowheadedLine : function(x1, y1, x2, y2) {
// 直线
draw.drawLine(x1, y1, x2, y2);
// 箭头
draw.drawArrowheaded(x1, y1, x2, y2);
}
}
Line.prototype.drawArrowLine = function(x1, y1, x2, y2) {
draw.drawArrowheadedLine(x1, y1, x2, y2);
}
Line.prototype.remove = function() {// 删除画出的线
var len = pointArray.length;
for (var i = 0; i < len; i++) {
idocument.body.removeChild(pointArray[i]);
}
pointArray = null;
pointArray = [];
}
Line.prototype.setDocument = function(idoc) {
idocument = idoc;
}
Line.prototype.setColor = function(newColor) {// 设置线条颜色
color = newColor;
}
}
var line = new Line();
line.drawArrowLine(1, 1, 123, 438);
</script>
分享到：
相关推荐
本项目名为“js箭头动画风车式过渡的满屏焦点图，兼容主流浏览器”，它利用JavaScript语言，特别是ECMAScript的特性，实现了具有箭头动画效果的风车式过渡效果，适用于全屏场景。下面将详细探讨这个项目所涉及的知识...
### 知识点一：JavaScript 箭头函数 ES6（ECMAScript 2015）标准中引入了一种新的函数表达式——箭头函数（Arrow Function）。箭头函数提供了一种更简洁的函数写法，它主要有以下几个特点： 1. **简洁语法**：箭头...
ArcGIS for JavaScript 动态标绘燕尾箭头，需要放到web服务器上才能看到效果
在JavaScript编程中，函数是核心组成部分，而箭头函数和常规函数是两种常见的函数定义方式。它们之间存在显著的区别，这些差异在实际开发中具有重要的意义。以下是五个关键区别以及相关实例分析： 1. **this值的...
在JavaScript中绘制直线并添加箭头是一项常见的图形编程任务，主要应用于网页动态效果、数据可视化或游戏开发等场景。本文将深入探讨如何使用JavaScript的基本绘图API，即HTML5的Canvas API来实现这一功能。 Canvas...
jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架，十分强大
JavaScript 是一种广泛使用的编程语言，特别是在Web开发中。这篇文档主要探讨了ES6（ECMAScript 2015）中引入的一些新特性，包括箭头函数、生成器（generator）、Date对象以及JSON。这些特性极大地丰富了JavaScript...
JavaScript中的箭头函数是ES6引入的一个重要特性，它的出现主要解决了传统函数中`this`指针的问题。在JavaScript中，`this`的值取决于函数的调用方式，而不是定义时的位置，这经常导致开发者在处理`this`时遇到困扰...
JavaScript箭头函数是ES6引入的一种新的函数定义方式，它为JavaScript编程提供了更为简洁的语法。箭头函数相比传统的函数表达式，其主要优势在于它与`this`关键字的处理方式不同，这使得在处理回调函数或者需要上...
JavaScript箭头函数与普通函数不只是写法上的区别，它们还有一些微妙的不同点，其中一个不同点就是this。 箭头函数没有自己的this值，箭头函数中所使用的this来自于函数作用域链。 这句话很简单，不
在网页设计中，"js控制div左右切换带左右箭头"是一...总的来说，“js控制div左右切换带左右箭头”是一个结合了HTML、CSS和JavaScript技术的典型示例，它展示了如何通过编程实现网页上的动态交互，提高用户的浏览体验。
JavaScript ES6中的箭头函数是语言的一个重要更新，它提供了更简洁、更直观的语法来定义函数。在本文中，我们将深入探讨箭头函数的基本概念、语法特性、作用域规则以及与传统函数的区别。 ### 1. 箭头函数的基本...
【JS大号箭头焦点图】是一种常见的网页交互设计元素，用于展示一组可滚动的图片或内容，通过大号箭头来引导用户进行左右切换，提高用户体验。这种焦点图广泛应用于网站的首页、产品展示、新闻滚动等场景，能够有效地...
在JavaScript编程中，实现带箭头的表格排序是一种常见的需求，尤其在数据展示和交互式网页设计中。本文将深入探讨如何使用JavaScript实现这一功能，包括理解基础的HTML表格结构、CSS样式设置以及JavaScript事件处理...
JavaScript箭头函数是在ECMAScript 6（ES6）标准中新增的一种函数表达式，它的引入为JavaScript编程带来了便利和语法上的简化。箭头函数的定义方式借鉴了其他编程语言中的类似功能，比如C#的Lambda表达式和Python的...
在JavaScript（简称JS）编程中，创建一个带箭头的画线程序是一项常见的需求，尤其在实现工作流或流程图的交互式展示时。本文将深入探讨如何利用JS实现这样的功能，以及它在工作流程序中的应用。 首先，我们要了解...
在JavaScript编程中，使用键盘箭头来控制选中标签元素是一项常见的交互设计，尤其是在网页应用中。这个小demo展示了如何通过监听键盘事件并处理箭头键的按下，以实现元素的选择切换。以下将详细讲解这一功能的实现...