传入两坐标点,利用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 ...
随机推荐
- IE8 环境的 JQuery 中的 $.ajax 拒绝访问---解决方案
需求是兼容到 IE8. $.ajax 总是请求失败,直接跳转到 error 函数中,报错:拒绝访问. 网上的一些解决方法都试过了还是没有用,比如再请求之前设置 jQuery.support.cors ...
- ue4 staticMesh属性记录
Light Map Resolution 光照贴图分辨率 Generate Mesh Distancde Field 生成网格距离场(一种不怎么消耗性能的阴影) http://api.unrealen ...
- (五)ORBSLAM关键帧的筛选和插入
ORBSLAM2的关键帧简介 图像插入频率过高会导致信息冗余度快速增加,而这些冗余的信息对系统的精度却十分有限,甚至没有提高,反而消耗了更多的计算资源.这等于吃力不讨好. 关键帧的目的在于,适当地降低 ...
- 2018-2019-2 网络对抗技术 20165325 Exp2 后门原理与实践
2018-2019-2 网络对抗技术 20165325 Exp2 后门原理与实践 实验内容(概要): (1)使用netcat获取主机Shell,cron启动 首先两个电脑(虚拟机)都得有netcat, ...
- 2018-2019-20175315 实验一 《Java开发环境的熟悉》实验报告
2018-2019-20175315实验一 <Java开发环境的熟悉>实验报告 一.实验内容及步骤 实验1 1.用mkdir建立“20175303exp1”的目录 2.在“20175303 ...
- pwnable.tw calc
题目代码量比较大(对于菜鸡我来说orz),找了很久才发现一个能利用的漏洞 运行之发现是一个计算器的程序,简单测试下发现当输入的操作数超过10位时会有一个整型溢出 这里调试了一下发现是printf(&q ...
- java 文件目录树
1. 目标格式,使用tree命令时,目录树格式如下. public class TreeTest { public static void main(String[] args) { File roo ...
- django ajax 及批量插入数据 分页器
``` Ajax 前端朝后端发送请求都有哪些方式 a标签href GET请求 浏览器输入url GET请求 form表单 GET/POST请求 Ajax GET/POST请求 前端朝后端发送数据的编码 ...
- C#获取指定的文件是否是内部特殊版本的代码
把内容过程经常用到的内容片段珍藏起来,下面的内容内容是关于C#获取指定的文件是否是内部特殊版本的内容,希望对各朋友有所用处. using System;using System.Diagnostics ...
- java爬虫实现爬取百度风云榜Top10
最近在项目中遇到了java和python爬虫进行程序调用和接口对接的问题, 刚开始也是调试了好久才得出点门道. 而后,自己也发现了爬虫的好玩之处,边想着用java来写个爬虫玩玩,虽说是个不起眼的dem ...