上样式生成函数代码

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. 关于js dtGrid报错长度的问题

    错误js截图 Uncaught TypeError: Cannot read property 'length' of undefined 翻译:Uncaught TypeError:无法读取未定义的 ...

  2. CPU或以太网模块重启DHCP请求

    最近,带了一个实习生,一天: 他:师傅,PLC如何首次分配IP地址啊? 我:不是教过你了吗? 他:我怎么用BOOTP软件,半天没有反应啊? 我:..... 原来,他做实验的CPU已经被分配IP地址了, ...

  3. app每次更新版本时调用js代码提示用户下载更新

    var url = '网络地址'; //APP升级 var wait; function update(){ //判断操作系统 var system = 'android'; if(mui.os.io ...

  4. C# 获取电脑配置信息

    对于软件绑定电脑常用到的方法汇总 public class Computer { public string MyProperty { get; set; } /// <summary> ...

  5. error while loading shared libraries: libopencv_core.so.3.4: cannot open shared object file: No such file or directory

    1. 将CMakeLists.txt 文件中 find_package(OpenCV REQURED)补充完整为带版本号的:find_package(OpenCV 2.4.9 REQURED) 2. ...

  6. 2018-2019-2 20165221 【网络对抗技术】-- Exp6 信息搜集与漏洞扫描

    2018-2019-2 20165221 [网络对抗技术]-- Exp6 信息搜集与漏洞扫描 目录 1. 实践目标 2. 实践内容 3. 各种搜索技巧的应用 a. 搜索网址的目录结构 b.使用IP路由 ...

  7. Week_10 C

    拓扑排序 Week_10    C 题意:输入n行数据a,b  ,表示a的钱数大于b的钱数,最低的人分的的钱数为888,问最少需要多少钱可以分给员工 思路:标准的拓扑排序,不过这题需要逆向拓扑 注意点 ...

  8. 区别 chown和chmod的用法

    本人总是习惯使用chmod,而把chown混淆. chown就是修改 第一列内容的 ,chmod是修改 第3,4列内容的. chown用法用来更改某个目录或文件的用户名和用户组的chown 用户名:组 ...

  9. 中国交建 WAF 基础平台 http://waf.ccccltd.cn/

    中国交建  WAF 基础平台  http://waf.ccccltd.cn/

  10. 设计模式 — 工厂方法模式(Factory Method)

    在开发系统中,经常会碰到一个问题.现在需要实现的一些功能,但是这个功能模块以后一定是需要扩展的,那么现在开发中就不仅要实现现在的功能,还要考虑以后的扩展.那么为了系统的健壮,扩展就要遵循开闭原则(简单 ...