上样式生成函数代码

lineStyle (x1, y1, x2, y2, lineWidth = 4, color = 'black') {
let rectX = x1 < x2 ? x1 : x2;
let rectY = y1 < y2 ? y1 : y2;
let rectWidth = Math.abs(x1 - x2);
let rectHeight = Math.abs(y1 - y2);
//弦长
let stringWidth = Math.ceil(Math.sqrt((rectWidth * rectWidth) + (rectHeight * rectHeight)));
let xPad = (rectWidth - stringWidth) / 2;
let yPad = (rectHeight - lineWidth) / 2;
let radNum = Math.atan2((y1 - y2), (x1 - x2));
return `
position: absolute;
width: ${ stringWidth }px;
height: ${ lineWidth }px;
background-color: ${ color };
transform: translate(${ rectX + xPad }px, ${ rectY + yPad }px) rotate(${ radNum }rad);
`;
},

传入两坐标点,利用div+css画线的更多相关文章

  1. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  2. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  3. div+css画一个小猪佩奇

    用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...

  4. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  5. 利用Div+CSS整体布局页面的操作流程

    简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>: <!DOCTYPE html><html> <head>  <meta chars ...

  6. Div+Css画太极图源代码

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>D ...

  7. 利用div+css实现九宫格,然后用js实现点击每个格子可以随机更改格子(div)的背景颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 利用 html+css 画同心圆(concentric circles)——绝对布局与相对布局

    一.css 绘制圆 #circle { width: 300px; height: 300px; background-color: #000000; border-radius: 300px; } ...

  9. div+css 画三角形

            <style type="text/css"> .rightdirection { width:0;height:0; line-height:0; b ...

随机推荐

  1. 关于HashMap put元素的原理

    HashMap集合put元素的原理:(1)计算key的hashCode(2)将key的hashCode作为计算因子,通过哈希算法计算HashMap的数组下标index(3)如果index下标的数组元素 ...

  2. Bootstrap使用-1

    目录 结构: 1. 视图函数 2. 模板 3. 登陆 4. 怎样发生的 添加模板 基础模板提供的block 定制基础模板 结构: $ tree -I "__pycache*|*.pyc|*. ...

  3. hibernate之一对多,多对一

    配置文件 <!--一对多--><!--name:集合属性名字 column:外键列名 class:与它相关的对象的完整列名 cascade:级联操作:分3种 save-update: ...

  4. JSR-303 数据校验学习

    一.JSR-303简介JSR-303 是 JAVA EE 6 中的一项子规范,叫做 Bean Validation,官方参考实现是Hibernate Validator. 此实现与 Hibernate ...

  5. 医学图像数据(二)——TCIA完整数据集下载方式

    1. 构建下载环境 l  TCIA数据集下载文件为.jnlp格式(JNLP(Java Network Launching Protocol )是java提供的一种可以通过浏览器直接执行java应用程序 ...

  6. day13 Python数据基本类型

    算数运算 / x除以y // 取整除 %返回除法的余数 !=   不等于 <> 不等于 赋值运算 c+= a等价于c=c+a c-= a等价于c=c-a 逻辑运算 and or not 基 ...

  7. C++11 double转化为string

    C++11转化double为string是一件很容易的事情. 方法: 1:使用C中的sprintf函数,这里就不说了. 2:使用std::ostringstream.这个与std::cout是一样的. ...

  8. C# 登陆验证码工具类VerifyCode

    using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; ...

  9. ASP Action函数 如何接收client传递的数据(编辑中。。。)

    参看链接:https://www.cnblogs.com/umlzhang/p/3654486.html 我这里总结一下,Action的参数的来源比较多 1.url 2.路由设定 3.post中的内容 ...

  10. java - day004 - 数组排序,插入,冒泡

    // 判断string 是否相等不能用 == 使用 equal 方法 Arrays.sort(数组);  数组排序算法 对基本类型. 优化的快速排序算法 对引用类型, 优化的合并排序算法