传入两坐标点,利用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 ...
随机推荐
- Linux 文本去重 之 命令sort 与 uniq
sort [-fbMnrtuk] [file or stdin] 选项与参数: -f :忽略大小写的差异,例如 A 与 a 视为编码相同: -b :忽略最前面的空格符部分: -M :以月份的名字来排序 ...
- http升级https的时候,遇到一个问题
问题: Mixed Content: The page at 'https://api.xxxx.com/test' was loaded over HTTPS, but requested an i ...
- Java装箱的 " == " 的问题
装箱和拆箱 packagecom.xzj.Test; /* * @ author thisxzj * @ create 2019-02-25 10:56 */ publicclassBase{ ...
- 提交变更(git commit)
当所有的变更都进入暂存区,就可以使用git commit进行提交了 $ git commit 执行这句话后,会弹出文本编辑区(自己配置的或默认的),文本编辑器可能会显示如下内容 # Please en ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
- “短路求值(Short-Circuit Evaluation)
// 逻辑与和逻辑或操作符总是先计算其做操作数,只有在仅靠左操作数的值无法确定该逻辑表达式的结果时,才会求解其右操作数. function aa() { if (null) { console ...
- JAVA进阶22
1.接口默认方法的使用 ①接口的默认方法可以通过接口实现类对象直接调用. ②接口的默认方法也可以被接口实现类进行覆盖重写 package cn.intcast.demo17; public inter ...
- Shell中字符串的切割、拼接、比较、替换
[截取] 一.Linux shell 截取字符变量的前8位,有方法如下: expr substr “$a” 1 8 : 二.按指定的字符串截取 第一种方法: ${varible##*string} # ...
- Access提示Insert Into 语法错误解决办法总结
1.关键字:如果你的数据库的表的设计包含了Access包含的关键字,则在插入的时候会出现“Insert Into 语法错误” 例如: string sqlText = String.Format(&q ...
- Laravel-google-authenticator--Google验证码
开发前的准备 安装Laravel 安装二维码生成器QrCode,没有安装也可以,接下来会安装 安装拓展 1.运行如下代码安装拓展包: composer require "earnp/lara ...