传入两坐标点,利用div+css画线
上样式生成函数代码
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画线的更多相关文章
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- div+css画一个小猪佩奇
用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
- 利用Div+CSS整体布局页面的操作流程
简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>: <!DOCTYPE html><html> <head> <meta chars ...
- Div+Css画太极图源代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>D ...
- 利用div+css实现九宫格,然后用js实现点击每个格子可以随机更改格子(div)的背景颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用 html+css 画同心圆(concentric circles)——绝对布局与相对布局
一.css 绘制圆 #circle { width: 300px; height: 300px; background-color: #000000; border-radius: 300px; } ...
- div+css 画三角形
<style type="text/css"> .rightdirection { width:0;height:0; line-height:0; b ...
随机推荐
- vue父子组件生命周期执行顺序
之前写了vue的生命周期,本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程,以及各个生命周期的特点.然而今天被问到父子组件生命周期执行顺序的时候一头雾水,根本不知道怎么回事.然后写了一段 ...
- Luogu P4204 神奇口袋 题解报告
题目传送门 [题目大意] 一个口袋里装了t种颜色的球,第i种颜色的球的数目为a[i],每次随机抽一个小球,然后再放d个这种颜色的小球进口袋. 给出n个要求,第x个抽出的球颜色为y,求满足条件的概率. ...
- springboot启动的时候排除加载某些bean
由于公司把redis相关的配置类,工具类放在了一个类似common的工程里,这样以后肯定不可避免的出现某些项目可能并不需要使用redis,但是还是依赖common里的别的一些类库 所以排除spring ...
- day09 详解内存管理机制
""" 今日内容:详解内存管理 1.引用计数 在内存中为了对变量的值进行标记从而方便管理,采用引用计数的方式对变量进行标记. (1)如果变量的值被引用一次,那么该变量的引 ...
- docker-compose部署ELK
本章基于 https://www.cnblogs.com/lirunzhou/p/10550675.html 在此基础上将ELK系统docker-compose.yml化. 其docker-compo ...
- Gitlab_ansible_jenkins三剑客②Gitlab的后台管理
系统信息和日志 健康状态 使用gitlab的用户管理和审批功能 创建用户 创建一个lead普通账号 进入test-repo仓库 这样就把dev添加到了test-repo这个项目中,并且有了develo ...
- JAVA 三元运算符 求最大值
package Code428; import java.util.Scanner; public class CodeScannerMax { public static void main(Str ...
- js 对象,数组,字符串,相互转换
1:对象转换数组 let obj = {'val1':1, 'val2':2, 'val3':3, 'val4':4}; var arr = [] for (let i in obj) { //取键 ...
- fiddler限制网速
在测试过程中,经常会要求测试弱网络情况时的一些特殊情况,这时候IOS还好说,在开发者选项中调整网络模式即可,但android就只能通过别的方式了,这里整理了通过fiddler抓包工具来设置弱网模式,在 ...
- shutil&shelve
https://www.cnblogs.com/xiangsikai/p/7787101.html http://www.cnblogs.com/wupeiqi/articles/4963027.ht ...