上样式生成函数代码

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. NIPS2017-The neural hawks process

    NIPS2017哪些论文值得关注 论文链接 1.首先这篇文章研究的是 event stream,什么是event stream呢 ? 假如你是一个医生,你每天会看到很多病人 ,对于每一个病人,你都有他 ...

  2. Java(19)JDBC

    一.使用jdbc的步骤 a.引入数据库厂商提供的驱动程序(引入jar包) b.记载驱动程序 Clss.forName("驱动程序类") c.获得连接 Connection con ...

  3. Python自动化中的元素定位(一)

    1.使用selenium中的webdriver模块对浏览器进行操作 1)from selenium import webdriver 加载模块 2)b = webdriver.Friefox() 打开 ...

  4. python3数学函数

    数 学 函 数 abs(x) 返回数字的绝对值,如abs(-10) 返回 10 ceil(x) 返回数字的上入整数,如math.ceil(4.1) 返回 5 cmp(x, y) 如果 x < y ...

  5. Linux initramfs说明

    1.前言 最近在尝试对手头的开发板进行移植,此处记录initramfs挂载的基本流程,记录一下,以备后查.分析时是基于linux3.4.2 2. rootfs的挂载 start_kernel-> ...

  6. nginx unit PHP

    2018-12-26 14:20:33 星期三 综述: nginx unit php 的关系: nginx -> 转发请求到 8300端口 -> unit 转发 8300 收到的请求 -& ...

  7. php中trait的使用

    1.php中的trait是啥? 看上去既像类又像接口,其实都不是,Trait可以看做类的部分实现,可以混入一个或多个现有的PHP类中,其作用有两个:表明类可以做什么:提供模块化实现.Trait是一种代 ...

  8. 一、学习起步vue——安装

    学习vue第一步:安装 (windows系统) 整个运行的命令:  npm -v node -v 查看版本 npm uninstall -g vue-cli 卸载vue-cli npm install ...

  9. JAVA Scanner的简单运用

    package Code428; import java.util.Scanner; /*Scanner 可以实现键盘输入数据 引用的步骤1.import 包路径.类名称只有java.lang包下的内 ...

  10. Python IDLE配置清屏快捷键(Ctrl+L)

    1.在Python\Lib\idlelib下,新建一个ClearWindow.py文件(没有时就新建),内容如下: """ Clear Window Extension ...