前言
前几天发了一篇文章,给大家分享了一下,如何更换idea的启动图,没想到一个点赞都没有,好难瘦~
今天再给大家分享下怎么样在不会PS的情况下,处理启动图
先看下效果图
- 左边部分是效果预览
- 右边部分是对页面素材内容的一些配置
后续如果还有时间的话,会出一个拖拽版本的
1.页面结构
使用flex弹性布局将页面分为等宽的两部分,左边是画布容器(使用的svg,没有使用canvas),右边是素材配置
2.SVG画布
可以看到svg下面的两个image标签都是空的,因为没有使用CDN加载图片,本地是将图片转成base64处理的
<svg id="svg" width="640" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 640 400"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="image" xlink:href="" width="100%" height="100%" x="0" y="0" visibility="visible" preserveAspectRatio="none"/>
<text id="title" x="72" y="102" style="fill:#fff; font-weight: bold; font-size:36px; letter-spacing:-2px">IntelliJ IDEA</text>
<text id="subTitle" x="74" y="123" style="fill:#fff; font-weight: bold; font-size:12px; letter-spacing: 0.5px">Ultimate 2021.2</text>
<image width="50" height="50" id="logo" x="540" y="296" xlink:href="" visibility="visible" preserveAspectRatio="none"/>
</svg>
注意
:图片(image)标签需要增加preserveAspectRatio属性,来处理图片拉伸铺满问题,如果使用的图片,不是对应比例的图片,拉伸也会变形,可以将preserveAspectRatio属性去掉
3.From
<div class="form">
<div class="form-sub">
<div class="form-sub-title">图片属性</div>
<div class="form-item">
<label>背景图片</label>
<button class="button img_upload_btn">选择图片</button>
<input type="file" name="file" class="img_upload" accept="image/gif, image/jpeg,image/x-png" style="display: none;"/>
<span class="form-tip">选择jpeg或png格式的图片</span>
</div>
<div class="form-item">
<label>图片宽高</label>
<div style="display:inline-flex;justify-content: space-between;flex-direction: row;width: 496px;">
<input type="text" name="width" class="form-input" value="640" placeholder="图片宽度" style="width:230px"/>
<input type="text" name="height" class="form-input" value="400" placeholder="图片高度" style="width:230px"/>
</div>
</div>
<div class="form-item">
<label>不透明度</label>
<input type="text" name="opacity" class="form-input" placeholder="不透明度" value="1"/>
</div>
</div>
<div class="form-sub">
<div class="form-sub-title">主标题</div>
<div class="form-item">
<label>主标题