javascript - 两端对齐,平均分配的算法如何写?
本文介绍了javascript - 两端对齐,平均分配的算法如何写?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
需求是对canvas里不确定的元素作平均分配处理,类似两端对齐。
已知父窗口的宽度是不确定的(这里为了方便查看,设置了1000px)
里面的item也是不确定的(这里是4个,每个20%)
请问如何这个算法公式如何计算呢?
http://jsbin.com/rikozadixa/edit?html,ou...
类似下面这样, text-align:justify 或者 flex, justify-content: space-between的效果
解决方案
let items = [...] //要放进去的元素
let parentWidth = 1000, //canvas宽度
itemNum = items.length, //元素个数
itemWidth = parentWidth * 0.2 //每个元素宽度
//计算元素间隔宽度
let spaceWidth = (parentWidth - (itemNum * itemWidth)) / (itemNum - 1)
let itemIndex, //元素index
itemX //元素的x坐标(按canvas左上角为0,0)
for (itemIndex = 0; itemIndex < itemNum; itemIndex++) {
itemPointX = itemIndex * (itemWidth + spaceWidth)
//这里按itemPointX为元素左上角的x坐标把元素绘制到cavans上
}
这篇关于javascript - 两端对齐,平均分配的算法如何写?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文