上样式生成函数代码

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. python 学习 leetcode ---number of island

    Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is surro ...

  2. node的应用场景

    I/O密集型 I/O密集的优势主要在于Node利用事件循环的处理能力,而不是启动每一个线程为每一个请求服务,资源占用极少. 是否不擅长CPU密集型业务 换一个角度,在CPU密集的应用场景中,Node是 ...

  3. Android相关面试题---面试官常问问题

    版权声明:本文为寻梦-finddreams原创文章,请关注: http://blog.csdn.net/finddreams/article/details/44513579 一般的面试流程是笔试完就 ...

  4. css-reset 代码

    最常用 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:bef ...

  5. MySQL插入中文数据出现?号

    原文转载自:https://blog.csdn.net/LynneZoe/article/details/79174119 运行环境:win10 mysql版本:Mysql5.6 做一个项目的时候,向 ...

  6. 基于注解的SpringMVC自定义DispatcherServlet配置

    通过重载AbstractAnnotationConfigDispatcherServletInitializer实现类的customizeRegistration()方法来自定义DispatcherS ...

  7. delphi

    其实现在哪里还有delphi,我之所以建立这个分类,只是为了纪念它,纪念我使用了一年delphi的经历. 那个年代c#刚出道,delphi还是c/s编程届数一数二的人物.但是没想到,这么快被c#打败了 ...

  8. story 泄露服务器libc版本

    记录下学到的姿势,利用信息泄露得到服务器libc 至少两个函数偏移,利用libc-databse得到服务器libc版本 传送门 泄露脚本如下 from pwn import * context.log ...

  9. 收藏一个可以学习javascript prototype的链接

    https://github.com/mqyqingfeng/Blog/issues/2

  10. SQLAlchemy+Flask-RESTful使用(二)

    前言 本来没想到能这么快出二的,谁知道序列化组件写上头了.分享知识真的会上瘾.... 变更记录 # 19.3.18 起笔 # 19.3.18 使用SQLAlchemy排序方法 # 19.3.18 补充 ...