上样式生成函数代码

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. 吴恩达《机器学习》课程笔记——第七章:Logistic回归

    上一篇  ※※※※※※※※  [回到目录]  ※※※※※※※※  下一篇 7.1 分类问题 本节内容:什么是分类 之前的章节介绍的都是回归问题,接下来是分类问题.所谓的分类问题是指输出变量为有限个离散 ...

  2. Linux kill 命令 以及USR1 信号解释

    kill 中的USR信号解释 USR1亦通常被用来告知应用程序重载配置文件:例如,向Apache HTTP服务器发送一个USR1信号将导致以下步骤的发生:停止接受新的连接,等待当前连接停止,重新载入配 ...

  3. MailKit系列之附件分离

    本文主要谈谈实现思路,不提供完整代码 一.分离基础 1.MIME邮件的multipart类型 引用文章:https://blog.csdn.net/wangyu13476969128/article/ ...

  4. jmeter知识总结(一)

    Apache JMeter是一款纯java编写负载功能测试和性能测试开源工具软件.相比Loadrunner而言,JMeter小巧轻便且免费,逐渐成为了主流的性能测试工具,是每个测试人员都必须要掌握的工 ...

  5. goland 文件头自动注释

    1 代码 /** * @Author: ${USER} * @Description: * @File: ${NAME} * @Version: 1.0.0 * @Date: ${DATE} ${TI ...

  6. C#来操作Word

    创建Word: 插入文字,选择文字,编辑文字的字号.粗细.颜色.下划线等: 设置段落的首行缩进.行距: 设置页面页边距和纸张大小: 设置页眉.页码: 插入图片,设置图片宽高以及给图片添加标题: 插入表 ...

  7. UltraEdit注册机 及使用方法详解

    转载自:http://www.iyaxi.com/ultraedit-key/ UltraEdit是一款强大的文字编辑器,很多编程的.搞设计的等等都能用到它,具体功能请自行百度.今天为大家带来UE软件 ...

  8. python socket.error: [Errno 24] Too many open files

    以openwrt AR9331开发板为例,socket连接到1019个就报错 “python socket.error: [Errno 24] Too many open files” 1.查看开发板 ...

  9. centos/redhat/ubuntu不同之处

    前言:最近用久了ubuntu,发现这个和centos还是有很大差别的,以下是我的个人总结: centos/redhat/ubuntu不同之处: 1.关系理解:centos和redhat,你可以理解为是 ...

  10. Ansible-Zabbix-基础agent批量装机

    ansible 批量装机-Zabbix篇 ############################# 小错误区:特此警示,问题要全面化,不要单纯想着你这边的问题,有可能也是对面的问题,反则亦此,学会深 ...