试玩咯 🎮

输入文字，点击确定，便可以生成一张海报。

试玩一把

先来一个诗词版

果然诗词版美的很特别。

灵感来源

我看《经典咏流传》这个，本来想实现后面的背景墙，但是找素材的时候，意外看到了文字海报，就来了灵感。

文字海报这个主意好像不赖。

半自动文字海报 🦭

半自动

之所以说是半自动，因为文字顺序是固定的。

文字是可以随意输入，20个字以内，最终文字的展示效果是按照提前布设置好的排版。所以说这是个半自动的文字海报。

我起身，踱了几步，觉得以后应该是有几率做成排版自动化。

排版

海报里面的文字有四种展示效果，四种展示效果又可以分成两个大类，这种情况一般就用少数服从多数的方式。

• 全部定义成公共样式，然后在将特殊样式一一重置。
• 五个较大的模块带内部边框，其他不带边框。
• 元素的内部边框，还是老法子，用伪元素实现。

.block {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background: #4895f6;
  position: absolute;
  text-align: center;
  color: #f6e5bf;
  font-size: 20px;
  font-weight: 600;
}
.block1,
.block2,
.block3,
.block4,
.block5 {
  width: 70px;
  height: 70px;
  line-height: 70px;
  font-size: 56px;
}
.block1::before,
.block2::before,
.block3::before,
.block4::before,
.block5::before {
  content: '';
  border: 1px solid #1b3389;
  position: absolute;
  left: 3px;
  top: 3px;
  width: 62px;
  height: 62px;
}

操作

文字长度判断

长度判断的范围是0到20，前开后闭，即(0,20]。

if (!textVal) {
  tipsVal = '请输入内容';
  tipsFlag = true;
}
if (textVal.length > 20) {
  tipsVal = '输入内容需要20字以内';
  tipsFlag = true;
}

清空公共方法

数据重置主要包括：

• 清空输入框信息；
• 清空提示信息，重置提示判断布尔值。

// 数据重置
function restVal() {
  textInput.value = '';
  tips.innerHTML = '';
  tipsVal = '';
  tipsFlag = false;
}

文字安置

去重&特殊字符

获取最终文字之前，我先进行了去重操作和特殊字符的判断。

• 去重使用正则匹配即可。
• 得到去重之后的字符串，使用split方法转换成数组，然后在进行去除特殊字符的处理。
• 特殊字符，正则匹配不好写，所以我用的排除的方式，设置了一个需要排除的数组，进行了一遍过滤。

// 去掉全部空格
function trim(str) {
  return str.replace(/\s+/g, '');
}
let list = textVal.split('');
let listNew = [];
let punctuateList = [',', '。', '，', '；', '(', ')', '（', '）'];
list.forEach((item, index) => {
  // 排除特殊符号
  if (!punctuateList.includes(item)) {
    listNew.push(item);
  }
});

文字位置安置

处理之后的文字数组，即最后的展示顺序。页面布局的顺序是固定的，按照数组顺序，一一对应，回显相对应的排版位置。

listNew.forEach((item, index) => {
  let inx = index + 1;
  let blockItem = blockObj[inx];
  blockItem.style.display = 'block';
  blockItem.innerHTML = item;
});

未完待续

模板种类待扩展，如果像专门的海报生成器一样，提供各式各样的海报类型，就完美了。