html中给div设置坐标,传入两坐标点，利用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&plus;CSS制作网页过程中常用的基本概念及标签使

CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

利用DIV&plus;CSS制作网页过程中常用的基本概念及标签使用细节

CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

div&plus;css画一个小猪佩奇

用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV)

利用Div&plus;CSS整体布局页面的操作流程

简单的网页布局(Div+CSS):    

Div&plus;Css画太极图源代码

D ...

利用div&plus;css实现九宫格，然后用js实现点击每个格子可以随机更改格子&lpar;div&rpar;的背景颜色

.rightdirection { width:0;height:0; line-height:0; b ...

随机推荐

leetcode 165

才一周没刷leetcode,手就生了,这个题目不难,但是完全AC还是挺费劲的. 题目描述: Compare two version numbers version1 and version2.If v ...

【转】Tomcat版本是32位、64位问题

转载地址:http://www.cnblogs.com/greensleeves/p/3168541.html 最近遇到一个Tomcat windows安装版本是32位还是64位问题.由于一系列原因, ...

深入理解Java虚拟机&lpar;一&rpar;、Java内存区域与内存溢出异常

Java虚拟机所管理的内存包括以下几个运行时数据区: 程序计数器(PCR): 1.是一块较小的内存空间,可以看做是当前线程所执行的字节码的行号指示器 2.为线程私有 3.执行Java方法有PCR,执行 ...

&lbrack;MetaHook&rsqb; R&lowbar;SparkStreaks

By hzqst void R_SparkStreaks(vec_t *pos, int count, int velocityMin, int velocityMax) { int i; parti ...

44&period;Android之Shape设置虚线、圆角和渐变学习

Shape在Android中设定各种形状,今天记录下,由于比较简单直接贴代码. Shape子属性简单说明一下:  gradient -- 对应颜色渐变. startcolor.endcolor就不多说 ...

Front-End-Develop-Guide

这份文件包含一系列用于面试审查求职者(候选人)的前端面试问题.这并不推荐把每个问题都问在同一个求职者(因为这会花几个小时的时间).从列表中抽取一些问题能够帮助你审查你需要求职者具备的一些技能. 注: ...

Unsupervised Feature Learning and Deep Learning&lpar;UFLDL&rpar; Exercise 总结

7.27 暑假开始后,稍有时间,“搞完”金融项目,便开始跑跑 Deep Learning的程序 Hinton 在Nature上文章的代码 跑了3天 也没跑完 后来Debug 把batch 从200改到 ...

jquery平滑滚动到锚点 一行代码

$("html,body").animate({scrollTop: $("#box").offset().top}, 1000); $("#box& ...

redis 系列15 数据对象的&lpar;类型检查&comma;内存回收&comma;对象共享&rpar;和数据库切换

一.  概述 对于前面的五章中,已清楚了数据对象的类型以及命令实现,其实还有一种数据对象为HyperLogLog,以后需要用到再了解.下面再了解类型检查,内存回收,对象共享,对象的空转时长. 1.1 ...

cropper&period;js实现图片裁剪预览并转换为base64发送至服务端。

一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...