传入两坐标点,利用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);
    `;
},

原文地址:https://www.cnblogs.com/jimaojin/p/10101249.html

时间: 2024-11-05 23:27:57

传入两坐标点,利用div+css画线的相关文章

div+css画一个小猪佩奇

用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container"> <!-- 尾巴 --> <div class="tail_left"></div> <div class="tail_right"></div> <div class="tail_

Div+Css画太极图源代码

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Div+Css太极图</title> <style type="text/css"> .circle{ width: 100px; height: 50px; border:1px solid black; border-radius: 100px; position

利用div+css实现九宫格,然后用js实现点击每个格子可以随机更改格子(div)的背景颜色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div+css+js实现九宫格点击随机变色</title> <script> var inner = document.getElementsByClassName("inner"); function ChangeColor

利用 html+css 画同心圆(concentric circles)——绝对布局

一.css 绘制圆 1 2 #circle { 3 width: 300px; 4 height: 300px; 5 background-color: #000000; 6 border-radius: 300px; 7 } key: 1.width = height 相当于画一个正方形 2.border-radius > 0.5*width                (border-radius:圆角半径 ) 二.absolute构成同心圆 绘制外面的圆: 1 #exCircle{ 2

div+css 画三角形

<style type="text/css"> .rightdirection { width:0;height:0; line-height:0; border-width:20px; border-style:solid; border-color:transparent transparent transparent #A9DBF6; } .bottomdirection { width:0;height:0; line-height:0; border-width:

Css画线

文字左右两边的线 .star-header{ color:#f46600; font-size: 20px; text-align: center;}.star-header span{ display: block; position: relative;}.star-header span:before,.star-header span:after{ content: ''; position: absolute; top:52%; background: #CCCCCC; width:

利用图形上下文画线

方式一. // 在这里面绘制,绘图的内容,因为只有在这里面才能获取跟当前view相关联的图形上下文. // 在这个view第一次即将显示的时候调用. // rect 要画图控件的bonds - (void)drawRect:(CGRect)rect { // 1.获取跟当前控件相关联的图形上下文 CGContextRef contexRef = UIGraphicsGetCurrentContext(); // 2.拼接绘图的路径 CGMutablePathRef path = CGPathCr

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么是css sprites   -   TOP css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加

PS 切HTML (ps+div+css)

今天的这个教程,教大家如何把psd页面利用div+css切割成html页面,这类的教程,本站做的一直都很少,大多讲的都比较零碎的一些东西,在今后,我们将慢慢发布翻译出更多这类的教程,供大家学习,转载请著名来源,以及站码翻译,谢谢.... 首先看看效果 下面的图片就是效果图,切割出来后,可能头部和底部会宽点..... 新建文件夹 开始时,在您的计算机中创建一个文件夹.我把它命名为zmool.再在文件夹中创建新文件夹images,放网站的所有图像.接下来打开代码编辑器(Dreamweaver),并在