<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(10, 10, 1000, 200);
</script>
分享到：
相关推荐
线条控制已经做了封装 var line = new Line(); 挂号的四个值代表x1、y1、x2、...x2、y2表示结束点坐标(有箭头的一边) line.drawArrowLine(10, 10, 10, 100); 删除线条 line.remove() 设置颜色 line.setColor(newColor)
通过这种方式，你可以利用JavaScript和HTML5的Canvas API轻松地在网页上绘制出带有箭头的直线。这只是一个基本的实现，你可以根据需求进一步定制，如添加动画效果、响应式布局或交互功能等。记住，Canvas API提供了...
在JavaScript（简称JS）编程中，创建一个带箭头的画线程序是一项常见的需求，尤其在实现工作流或流程图的交互式展示时。本文将深入探讨如何利用JS实现这样的功能，以及它在工作流程序中的应用。 首先，我们要了解...
在这个“canvas画箭头”的示例中，我们将深入探讨如何使用canvas API来绘制箭头，以及相关的一些JavaScript和HTML知识。 首先，我们需要在HTML文件中设置一个`canvas`元素，例如在`test.html`中： ```html <!...
2. JavaScript库：像jQuery、GreenSock (GSAP) 和 anime.js 这样的JavaScript库提供了强大的动画功能，可以精确控制箭头动画的时间轴、速度曲线、延迟和循环行为。 3. SVG动画：对于矢量图形，如SVG箭头，可以使用...
本文将详细讲解如何使用SVG在一条直线上绘制中间的箭头。 首先，SVG的基本结构是由一系列的元素构成的，包括矩形（rect）、圆形（circle）、路径（path）等。在SVG中绘制直线，我们可以使用`<line>`元素。例如，要...
在SVG中画箭头，我们可以利用`<path>`元素配合SVG路径数据来实现。路径数据由一系列命令和坐标组成，例如`M`（移动到）、`L`（直线到）和`Z`（闭合路径）等，通过这些指令，我们可以绘制出箭头的形状。 例如，一个...
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。...4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点移动保持连接状态 6、附带节点鼠标右键弹出自定义菜单代码
在实现线段箭头时，你可以使用Leaflet的Polyline类，通过自定义样式来创建带有箭头的线条。通过设置`dashArray`和`rotate`属性，你可以改变线条的样式和方向。然而，这种方法可能需要复杂的CSS和JavaScript技巧，...
在“vue 流程图，拖拽创建 可以画箭头连接元素”的项目中，我们看到开发者使用Vue来实现了一个交互式的流程图应用。这个应用允许用户通过拖拽方式创建流程图，并使用线条连接各个元素，这样的功能对于业务流程分析、...
jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架，十分强大
接下来，我们将在`main.js`中编写JavaScript代码，初始化Cesium视图并实现箭头的绘制。Cesium提供了多种几何形状的构造函数，但没有直接的箭头构造函数。因此，我们需要通过组合其他几何形状（如线段和多边形）来...
做 gis 项目的朋友应该对 OpenLayer 都很熟悉了...虽然有很多优点，但是其并没有像 百度、搞的一样提供内部带箭头线条的绘制API，因此需要手动完成这个功能，这里我写了一个完成此功能的完整 DEMO，各位可以参考下载。
对于程序员来说，可能需要使用编程语言（如Python的PIL库或JavaScript的Canvas API）来实现自定义箭头。 2. 箭头的旋转和移动： 一旦箭头绘制完成，可以对其进行旋转和移动操作以适应不同的布局需求。在大多数图形...
这是我在工作中写的一个画箭头的方法，还可以画直线，支持单击事件，我觉得这个方法写的还不错，欢迎下载使用，如有不懂或想在这基础上添加功能，请与我联系。QQ：526125929
在这个主题中，我们关注的是如何利用Bootstrap和CSS3创建一种特殊的步骤条，它包含带有箭头指向的按钮，这些按钮可以指示用户操作流程的方向。下面将详细阐述实现这个功能所需的知识点。 1. **Bootstrap基础**： -...
矢量图层用于显示由点、线、面等几何对象组成的地理数据。在态势箭头或进击箭头的场景中，我们可以使用LineString几何对象来表示箭头路径，而使用ArrowHead符号化方法来绘制箭头的头部。 1. **创建LineString几何...
在Flex编程中，创建一个可拖拽、带有箭头且颜色可变的线条是一个常见的需求，这通常用于构建图形编辑器、流程图或者简单的绘图应用。本篇将详细讲解如何利用ActionScript（AS）来实现这样的功能。 首先，我们需要...
在"高德地图画线，单条多条带方向示例"中，我们主要关注的是`AMap.Polyline`类，这是用来创建折线或直线的类，适用于表示路径或路线。 要实现在地图上画出一条线，首先需要在HTML中引入高德地图的JavaScript库，并...
Leaflet本身并不直接支持绘制带箭头的多边形线（polyline），但我们可以借助一些扩展插件或者自定义方法来实现这一功能。本文将详细介绍如何在Leaflet地图上绘制带箭头的线条。 首先，了解Leaflet中的Polyline。...