javascript - 两端对齐，平均分配的算法如何写？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 两端对齐，平均分配的算法如何写？

ringa_lee 2017-04-11 09:12:15

[JavaScript讨论组]

388

需求是对canvas里不确定的元素作平均分配处理，类似两端对齐。

已知父窗口的宽度是不确定的（这里为了方便查看，设置了1000px）
里面的item也是不确定的（这里是4个，每个20%）

请问如何这个算法公式如何计算呢？

http://jsbin.com/rikozadixa/edit?html,ou...

类似下面这样, text-align:justify 或者 flex, justify-content: space-between的效果

ringa_lee

全部回复(3)

阿神2017-04-11 09:14:15 3楼

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上
}