传入两坐标点,利用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 ...
随机推荐
- .Net 之 RPC 框架之Hprose(远程调用对象)
实现远程调用对象,跨进程访问对象,可实现分布式 首先给服务端和客户端 nuget Hprose 可使用tcp和http两种调用方式 服务端 using Hprose.Server; using Sys ...
- Lambda表达式与函数式接口
Lambda表达式的类型,也被称为目标类型(targer type),Lambda表达式的目标类型必须是"函数式接口(functional interface)".函数式接口代表只 ...
- about:firefox set
about:config new:browser.cache.disk.parent_directory (disk.cache) new:browser.cache.offline.parent_ ...
- window10:jdk 8下载和安装步骤
window10:jdk 8下载和安装步骤 点击链接:https://blog.csdn.net/qq_39720249/article/details/80721719
- 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能
题目:编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能 要求:MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin 用来把文本文件(内容为十 ...
- 从头开始学gradle【各系统安装gradle】
所有的环境都是基于jdk1.8 java -version windows安装 下载对应的gradle.zip安装包,解压到指定文件即可,然后配置相应的环境变量即可使用 linux/mac 安装 mk ...
- 配置ssh无密码登陆Linux
Windows下面的话需要安装git,或者其他能执行shell命令的软件 1.首先要先修改SSH的配置文件 vi /etc/ssh/sshd_config#修改配置文件 #如果被#注释了,就取消#号, ...
- nginx 配置访问 静态文件
server { listen 7777; server_name crpapitest.shunshunliuxue.com; index index.html index.htm i ...
- wxpy使用
一 简介 wxpy基于itchat,使用了 Web 微信的通讯协议,,通过大量接口优化提升了模块的易用性,并进行丰富的功能扩展.实现了微信登录.收发消息.搜索好友.数据统计等功能. 总而言之,可用来实 ...
- 当运行docker run -i -t ubuntu /bin/bash时,提示报错Error response from daemon: EOF?
可能是下载过程中出现错误,重新执行docker pull ubuntu,在执行docker run -i -t ubuntu /bin/bash就OK了.