开发背景

要开发一个拖拽的大屏项目，其中涉及到一个装饰组件，是一个立方体cube，要求颜色可以修改，大小可以拖拽改变。

效果如下

分析

经过我一番奇思妙想，决定用svg实现，因为对svg比较熟悉。那就先来在草纸上画草图吧。

先假设它的长宽为400，300，4:3的数据好计算，有利于我们前期的分析。分析发现，这个立方体可以简化成两个平面，上面顶部蓝色的和侧面我们所看到的（呈渐变效果）。这就好办多了，定义两条path路径，由其中一个path构建顶部的面，再用另一个path构建侧边的面。

顶部的面设置其fill填充颜色为固定颜色，侧边的面设置其fill为渐变色。此处要注意，渐变色是从中间向两边扩散，这块我用的是linearGradient实现的，具体参照下面代码。

代码实现

分析完后就可以进入coding环节了，思路就是先按照草图画出一个固定宽高的原型，再用变量替换掉固定值。

已知变量

{width: 450,height: 170,decorationColor1: '#244ab2',decorationColor2: '#1c2c9d',fillColor: '#00dcff'
}

关键绘制部分代码

<svgheight="100%"width="100%"><defs><linearGradient id="gradient1"><stopoffset="0%":stop-color="decorationColor1"/><stopoffset="50%":stop-color="decorationColor2"/><stopoffset="100%":stop-color="decorationColor1"/></linearGradient></defs><path:fill="fillColor"stroke="transparent"stroke-width="0":d="`M 0 ${height * (1/3)}L ${width * 0.5} 0L ${width} ${height * (1/3)}L ${width * 0.5} ${height * (2/3)}L 0 ${height * (1/3)}`"/><pathfill="url(#gradient1)"stroke="transparent"stroke-width="0":d="`M 0 ${height * (1/3)}L ${width * 0.5} ${height * (2/3)}L ${width} ${height * (1/3)}L ${width} ${height * (2/3)}L ${width * 0.5} ${height}L 0 ${height * (2/ 3)}L 0 ${height * (1/3)}`"/>
</svg>

全部代码（vue）

<template><div:key="updateKey"style="width: 100%;height: 100%"class="bs-design-wrap"><svgheight="100%"width="100%"><defs><linearGradient id="gradient1"><stopoffset="0%":stop-color="decorationColor1"/><stopoffset="50%":stop-color="decorationColor2"/><stopoffset="100%":stop-color="decorationColor1"/></linearGradient></defs><path:fill="fillColor"stroke="transparent"stroke-width="0":d="`M 0 ${height * (1/3)}L ${width * 0.5} 0L ${width} ${height * (1/3)}L ${width * 0.5} ${height * (2/3)}L 0 ${height * (1/3)}`"/><pathfill="url(#gradient1)"stroke="transparent"stroke-width="0":d="`M 0 ${height * (1/3)}L ${width * 0.5} ${height * (2/3)}L ${width} ${height * (1/3)}L ${width} ${height * (2/3)}L ${width * 0.5} ${height}L 0 ${height * (2/ 3)}L 0 ${height * (1/3)}`"/></svg></div>
</template>
<script>import {refreshComponentMixin} from 'data-room-ui/js/mixins/refreshComponent'export default {name: 'Decoration16',components: {},mixins: [refreshComponentMixin],props: {// 卡片的属性config: {type: Object,default: () => ({})}},data() {return {}},computed: {width() {return this.config.w},height() {return this.config.h},fillColor() {return this.config.customize.borderColor},decorationColor1() {return this.config.customize.decorationColor1},decorationColor2() {return this.config.customize.decorationColor2}},watch: {},mounted() {},methods: {}
}
</script><style lang="scss" scoped></style>