主题
主要就是分享一下一个绘图类的内容、包含有基本的划分列columns,以及不定量的切割线，例如：4、6、8、10、12这种,要求呈现出"2+2","3+1","1+3","4" 这种区块组合输出,原本以为挺简单的,通过枚举补漏洞的方式,发现划分情况变多变得不适应了,此处简略做一下分享。
阶段1
最开始对复杂度有误判，觉得用枚举的办法解决好2，4，6的情况应该就差不多了,后来通过补漏洞的方式发现问题越来越多,面临的前置问题解决后,后续的划分问题陡然有点儿无从下手
- 图块中的图元实际有多种情况,比如中间、左右两边都存在各自有定序问题,通过x横向排序后,需要对左、中、右各自的独立顺序进行处理。
- 区块之间的线条数量和序号因为操作的原因,无序且没规律,但要保证显示逻辑正确。
- 区块在循环中进行,纯粹的累加等逻辑判断不具备通用性,包含连续性、数量、计算等要素。
阶段2
在解决完成前置问题后，尝试了区块的数量+序号判断处理，发现基本无法覆盖情况,于是想到了分割模式的二进制字符串，即："00100"、"01000"、"00010"的分割表述字串,1代表有切线,同时包含顺序内容，用以表示// "2+2"、"1+3"、"3+1"的这种切割划分方式,但后续应该怎么处理依然没清理出来一个思路,没整理出来的思路是"00100"这种情况输出的是2,前置的2没法表示，干扰项有点儿多、陷入了无尽的头脑乱序中。
阶段3
解析步骤
- 解析模式：遍历
pattern字符串，记录下每次遇到1的位置。 - 计算区块数量：根据
1的位置和矩形的列数计算出各部分的宽度。 "00100"这种表述,第0位和最后一位是干扰项,因此可以移除干扰。
实现代码
function parseCutPattern(pattern, columns) {
// 记录分割的位置
let cutPositions = [];
for (let i = 1; i < pattern.length-1; i++) {
if (pattern[i] === '1') {
cutPositions.push(i);
}
}
// 添加起始和结束位置
cutPositions.unshift(0);
cutPositions.push(columns);
// 计算各部分的宽度
let parts = [];
for (let i = 0; i < cutPositions.length - 1; i++) {
let partWidth = cutPositions[i + 1] - cutPositions[i];
parts.push(partWidth);
}
// 调整输出
let totalParts = parts.reduce((acc, curr) => acc + curr, 0);
let remainder = columns - totalParts;
if (remainder > 0) {
parts[parts.length - 1] += remainder;
}
// 格式化输出
return parts;
}
// 测试函数
console.log(parseCutPattern("00100", 4)); // "2+2"
console.log(parseCutPattern("01000", 4)); // "1+3"
console.log(parseCutPattern("00010", 4)); // "3+1"
console.log(parseCutPattern("00001000", 8)); // "4+4"
console.log(parseCutPattern("00001100", 8)); //
console.log(parseCutPattern("11001101", 8)); //
console.log(parseCutPattern("000000010000", 12)); // "7+5"
console.log(parseCutPattern("0000000010000", 12)); // "8+4"
console.log(parseCutPattern("00000000010000", 12)); // "9+3"
console.log(parseCutPattern("000000000010000", 12)); // "10+2"
处理结果
通过遍历,为0的情况进行补充,其他为1的情况表示有切线,进行输出,直至有切线的内容尽数取尽
var ind=parseInt(groupIndex);
if(ind == 0){
var rec=arr.shift();
innerHTML = innerHTML + `+${width}×${rec}`;
sum = parseFloat(Number(sum) + Number(width) * Number(rec)).toFixed(2);
}else{
if(groupData.length>0){
var rec=arr.shift();
if(rec){
innerHTML = innerHTML + `+${width}×${rec}`;
sum = parseFloat(Number(sum) + Number(width) * Number(rec)).toFixed(2);
}
}
}
总结
直到 阶段二，才算是初步掌握了一些规律，之前一直在当任务完成，没有去细想一些规律性的东西,因为时间催的比较急,就想着先简单解决,空出时间去处理后续,奈何，程序上的事情没啥偷懒的空间, 思路打开,就有种理当如此的感觉~,挣扎和放弃真就一念之间,解决问题的喜悦还是那么令人心旷神怡,这也许是对煎熬最美好的馈赠~。
