码迷,mamicode.com
首页 > Web开发 > 详细

传入两坐标点,利用div+css画线

时间:2018-12-11 13:06:08      阅读:682      评论:0      收藏:0      [点我收藏+]

标签:rect   transform   tran   width   ceil   string   div+css   osi   sla   

上样式生成函数代码

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画线

标签:rect   transform   tran   width   ceil   string   div+css   osi   sla   

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

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!