• 页面上有两颗星星图标，画一条线连接两颗星星。 1.先获取两点的坐标 2.计算弦长及旋转角度 3.绘制线 <div class="quality-analysis"> <div class="cnt-box"> <span class="selected-start"> ...
页面上有两颗星星图标，画一条线连接两颗星星。

1.先获取两点的坐标   2.计算弦长及旋转角度   3.绘制线

<div class="quality-analysis">
<div class="cnt-box">
<span  class="selected-start">
<svg class="icon fs16 warn-text icon-orange " aria-hidden="true">
<use xlink:href="#h-delete-collect"></use>
</svg>
</span>
<span  class="selected-start">
<svg class="icon fs16 gray-text" aria-hidden="true">
<use xlink:href="#h-collect"></use>
</svg>
</span>
</div>
</div>
<script>
export default {
data() {
return {
positionList: [], // 获取坐标
}
},
mounted() {
this.getStartPosition()
this.drawLine(this.positionList)
},
methods: {
// 获取星星坐标
getStartPosition() {
let nodeList = document.querySelectorAll('.selected-start')
let parentNode = document.querySelector('.cnt-box').offsetParent
let actualLeft = 0
let current = 0
let actualTop = 0
if(nodeList.length>0){
for(let i=0;i<nodeList.length;i++){
actualLeft = nodeList[i].offsetLeft  // 累加计算星星相对于顶级父元素的距离
actualTop = nodeList[i].offsetTop
current = nodeList[i].offsetParent
while(current!== parentNode){
actualLeft += current.offsetLeft
actualTop += current.offsetTop
current = current.offsetParent
}
let obj = {
x:actualLeft,
y:actualTop,
}
this.positionList.push(obj)
}
}

},

// 画星星连线
drawLine(positionList) {
if(positionList.length>0){
for(let i=1;i<positionList.length;i++){
// 计算长宽
let rectWidth = Math.abs(positionList[i].x - positionList[i-1].x)
let rectHeight = Math.abs(positionList[i].y - positionList[i-1].y)
// 在页面确定div左上角的具体位置
let rectX = positionList[i].x < positionList[i-1].x ? positionList[i].x : positionList[i-1].x
let rectY = positionList[i].y < positionList[i-1].y  ? positionList[i].y : positionList[i-1].y

// 弦长
let stringWidth = Math.ceil(Math.sqrt((rectWidth * rectWidth)+ (rectHeight*rectHeight)))
let xPad = (rectWidth - stringWidth)/2
let yPad = (rectHeight - 2)/2
// 从x轴到(x,y)的旋转角度
let radNum = Math.atan2((positionList[i].y - positionList[i-1].y),(positionList[i].x - positionList[i-1].x))
let  traX  = rectX +  xPad - 8 // 8为星星图标大小的1/2
let  traY  = rectY +  yPad + 8
// 创建div
let div = document.createElement('div')
div.innerHTML = '<div ' +
' style = "width:' + stringWidth + 'px;height:2px;transform:translate(' + traX+ 'px,' + traY +'px) rotate('+ radNum+ 'rad) " class="draw-line-style"></div>'
let doc = document.querySelector('.quality-analysis')
doc.appendChild(div)
}
}
}
}
}
</script>

说明：

<style lang="scss">
.quality-analysis {
position: relative;
.draw-line-style{
top: 0;
position: absolute;
border-top: 1px solid \$bgOrange;
}
</style>

1.每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。

2.atan2(y,x) ：返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。

展开全文
• 这是由于找不到适合分辨率的图片导致的，建议分别在mdpi,xdpi等分辨放置图片

这是由于找不到适合分辨率的图片导致的，建议分别在mdpi,xdpi等分辨放置图片

展开全文
• 一个整数，表示一条直线上最多星星的数目。 Sample Input 5 0 0 1 0 1 1 0 1 0.5 0.5 Sample Output 3 #include <iostream> using namespace std; int maxnum(double r[], int t); int ...
• ## 前端一条线了解

热门讨论 2017-09-17 21:50:16
前端一条线了解。。。
前端一条线了解。。。

展开全文
• ###哈哈大学以来第次写博客，写的不好请指正。 ##这个评分器是用canvas制作的而非图片，其插件大小相对于图片而言要小很多，这个star评分器可以定义星星数量、星星的角数（例如五角星，六角星）、星星边的颜色、...

# 微信小程序评分器

## 插件引用：

.wxml

<star bindScoreChange="getScore" starData="{{starData}}"/>

.js
Page({
data:{
starData:{
width:500,
height:100,
lineColor:"blue",//星星的边界颜色
cape:"10",//星星的角数
fillColor:"blue",//星星填充颜色
starNum:"5",//星星个数
bgColor:"white",//背景颜色
totalScore:"100"，//总分
lineWidth:"1"//线条粗细

}
},
getScore(e){//可以传递当前得分
console.log("e" + e.detail.score)
},
})

## 引用方法：

一、在pages文件下的 .json配置文件引入我们的插件

{
"usingComponents": {

"star":"plugin://myPlugin/star"

}
}

二、在**. wxml**文件下引入评分噐的标签

<star bindScoreChange="getScore" starData="{{starData}}"/>

**getScore（）**方法是捕获用户点击事件，获取用户给的分值
三、在 .js文件下设置数据以及创建接收函数

Page({
data:{
starData:{
width:500,
height:100,
lineColor:"blue",//星星的边界颜色
cape:"10",//星星的角数
fillColor:"blue",//星星填充颜色
starNum:"5",//星星个数
bgColor:"white",//背景颜色
totalScore:"100"，//总分
lineWidth:"1"//线条粗细
}
},
getScore(e){
console.log("e" + e.detail.score)
},
})

这些弄好就可以玩了：
比如我要五角星要10个，那么设置cape:5, starNum:10我们来看一下效果：

我要小粉色星星：那么设置fillColor:"pink"

100分太多了要别的分总分3分，那么我们设置totalScore:3

展开全文
• ## SSH一条线理解

热门讨论 2017-01-24 16:33:20
1.首先建立数据库 2.然后创建包 3.hbm.xml文件配置 <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://www.hibernate.org/dtd/hibernate-mapping-3.0.dtd">
• 《在颗小星星底下》
• 一条线两种颜色的实现方法  思路是背景颜色是灰色，在覆盖上面新的颜色，限制它的长度，效果如下： 我的待办 num_cot0背景色border-bottom:2px solid #ccc; .nub_cot0 { margin-left:10px; margin-...
• ## 星星

2014-07-30 12:17:50
星星 Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Submission(s) : 8 Accepted Submission(s) : 4 Font: Times New Roman | Verdana | Georgia Font Size: ← ...
• P1502 窗口的星星 提交2.78k 通过682 时间限制1.00s 内存限制125.00MB 提交代码加入收藏 题目提供者cyrcyr 难度省选/NOI- 历史分数100 提交记录查看题解 标签 高性能高级数据...
• 初学Canvas写了个在一片区域内随机产生星星并且不断闪动的效果。具体实现如下所示。 首先创建个canvas让其适配屏幕的大小。 h = screen.height - 200; w = screen.width - 10; can1 = document....
• 1196: 数星星（二）（结构体专题） 一天，小明坐在院子里数星星，Gardon就出了个难题给他，让他数数天上的星星最多有多少个是在同一条...一个整数，表示一条直线上最多星星的数目。 python代码： class Solution: def
• 个天空中有很多星星（看作平面直角坐标系），已知每颗星星的坐标和亮度（都是整数）。 求用宽为W、高为H的矩形窗户（W,H为正整数）能圈住的星星的亮度总和最大是多少。（矩形边界上的星星不算） 输入格式 ...
• 个简单的网页小制作，星星连线，大家可以参考一下后台代码
• 一天Qinz和wudired在天上数星星，由于星星可以排列成一条直线，他们比赛看谁能找到一条直线使得这条直线上的星星最多。假设夜空是一个二维平面坐标系，坐标轴为x，y。星星的坐标(x,y)为整数，且同一位置至多有一颗...
• 消灭星星算法思路内容 算法...我们高中学过，这是一条二次函数曲线。而在此基础上多点一块，增加的分数为 10n+5。2)末尾分数。末尾奖励分数则是越少越好。 0~9，分数奖励为2000~380色块出现的概率。为了得到尽可能的...
• 晚上，小卡从阳台望出去，“哇~~~~好多星星啊”，但他还没给其他房间设个窗户。 天真的小卡总是希望能够在晚上能看到最多最亮的星星，但是窗子的大小是固定的，边也必须和地面平行。 这时小卡使用了超能力（透视术...
• 一天，小希坐在院子里数星星，Gardon就出了个难题给她，让她数数天上的星星最多有多少个是在同一条直线上的...一个整数，表示一条直线上最多星星的数目。 样例输入 5 0 0 1 0 1 1 0 1 0.5 0.5 样例输出 3 暴
• CDPStarEvaluation星星评价,获得评价等级和分数...星星评价，可单击或拖动星星获得评价等级和分数,默认精确到小数点后两位,可根据需求自定义,详情看demo 测试环境：Xcode 6.2，iOS 6.0以上 在程序中引入CoreL
• 放到前面同样会有语法错误，*星args返回的是元组tuple元祖星星args返回的是字典python默认会从左到右匹配变量名，对于参数，划线是最好的学习方法country...最后这个混合使用的也特别好，画好线一目了然? 另外个...
• ## Python 画星星图案

千次阅读 多人点赞 2019-12-25 14:27:03
Python画星星： import turtle as t t.goto(100,0) for i in range(50): t.left(80) t.fd(100) t.left(135) t.fd(105)
• 计算几何:数星星 ...天，小希坐在院子里数星星，Gardon就出了个难题给她，让她数数天上的星星最多有多少个是在同一条直线上的。天上的星星太多了，小希马上就看花了眼，你能写个程序来帮她计算么
• 给你堆的矩形求这些矩形再重叠的情况下的面积？便需要用到扫描线 按照x排序从小到大 xi(1~8)，这样处理之后我们可以看到 每两的相邻的 xi的值把矩形分成了若干个矩形，这是我们记录一下上...
• “不要问我太阳有多高我会告诉你我有多真不要问我星星有几颗我会告诉你很多很多”一天Qinz和wudired在天上数星星，由于星星可以排列成一条直线，他们比赛看谁能找到一条直线使得这条直线上的星星最多。假设夜空是一...
• 2、怪物每次发射的星星碰撞完后向下掉，并同时生成其他怪物，每个怪物有血量，当其掉出下方检测线时，主角血量减少 游戏UI界面 1、背景图 2、下方从左至右依次为： 当前分数、帮助界面、显示怪物血量开关、当前   ...
• 1、Seekbar就是个进度条；可拖动可改变； 拖动后： 原代码如下： 布局文件： &lt;?xml version="1.0"encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="...
• 星星个消失的动画，fadeOut,这个动画在DoTween里面有问题，验证下来一旦对个对象实施此操作，则所有对象都会消失，而且重新开始这些对象也无法恢复显示。这里我们需要添加个Aniation来处理星星 消失。1 在...
• 我的毛绒小狗的肚子上有一条线头 一开始我没有拉这条线 可是我知道小狗的肚子里有秘密 我希望是梦里的米老鼠型的巧克力饼干 也希望是许多闪着光的星星也许只是一根没有尽头的线 突然我想起了我生病去世的小狗 ...
• Cocos Creator官方所发布的新手教程——快速上手：制作第个游戏写得详细且通俗易懂，笔者出于学习的目的编写了关于摘星星进阶版的教程，希望对大家有所帮助。自知不能达到官方那样的水平，所以写得比较简单，还请....

...