上样式生成函数代码

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写法

    1.在DIV中找某个CLASS $('.doc_input', 'div')

  2. Codeforces Round #552 (Div. 3) F. Shovels Shop(dp)

    题目链接 大意:给你n个物品和m种优惠方式,让你买k种,问最少多少钱. 思路:考虑dpdpdp,dp[x]dp[x]dp[x]表示买xxx种物品的最少花费,然后遍历mmm种优惠方式就行转移就好了. # ...

  3. Codeforces Round #484 (Div. 2)Cut 'em all!(dfs)

    题目链接 题意:给你一棵树,让你尽可能删除多的边使得剩余所有的联通组件都是偶数大小. 思路:考虑dfs,从1出发,若当前节点的子节点和自己的数目是偶数,说明当前节点和父亲节点的边是可以删除的,答案+1 ...

  4. net core appsetting配置

    public class BaseController : Controller { protected WLEntity _db; protected ILogger _log; protected ...

  5. 使用Github时遇到问题的解决方法

    记录了一些我在使用Github时遇到问题的解决方法 git中报unable to auto-detect email address 错误的解决办法 问题描述: 执行 git commit -m &q ...

  6. c++ 常用头文件

    1.#include<iostream> iostream 的意思是输入输出流.#include<iostream>是标准的C++头文件,任何符合标准的C++开发环境都有这个头 ...

  7. 第十三节,OPenCV学习(二)图像的简单几何变换

    图像的简单几何变换 几何变换不改变图像的像素值,只是在图像平面上进行像素的重新安排 适当的几何变换可以最大程度地消除由于成像角度.透视关系乃至镜头自身原因所造成的几何失真所产生的的负面影响. 一.图像 ...

  8. springboot启动流程

    @EnableDiscoveryClient @SpringBootApplication public class ProducerApplication { public static void ...

  9. CentOS 安装 Docker

    前言:其实安装步骤Docker官网很详细,如果有些人英文不好看的比较慢的话就可以直接看我的,我也是摘自官网,具体步骤如下 1. 安装依赖包 $ sudo yum install -y yum-util ...

  10. centOS7在VirtualBox中装好后的网络连接问题

    1. 环境 物理机OS:Windows 7 虚拟机:VirtualBox 虚拟机OS:CentOS7 2. 虚拟机网络设置 (该部分内容参考于网络,未深究原因,待后续研究补充) 网卡1设置如下图: 网 ...