svg画简单的立方体

开发背景

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

效果如下

分析

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

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

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

代码实现

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

已知变量

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

关键绘制部分代码

<svg
      height="100%"
      width="100%"
    >
      <defs>
        <linearGradient id="gradient1">
          <stop
            offset="0%"
            :stop-color="decorationColor1"
          />
          <stop
            offset="50%"
            :stop-color="decorationColor2"
          />
          <stop
            offset="100%"
            :stop-color="decorationColor1"
          />
        </linearGradient>
      </defs>

      <path
        :fill="fillColor"
        stroke="transparent"
        stroke-width="0"
        :d="`M 0 ${height * (1/3)}
                L ${width * 0.5} 0
                L ${width} ${height * (1/3)}
                L ${width * 0.5} ${height * (2/3)}
                L 0 ${height * (1/3)}
                `"
      />
      <path
        fill="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"
  >
    <svg
      height="100%"
      width="100%"
    >
      <defs>
        <linearGradient id="gradient1">
          <stop
            offset="0%"
            :stop-color="decorationColor1"
          />
          <stop
            offset="50%"
            :stop-color="decorationColor2"
          />
          <stop
            offset="100%"
            :stop-color="decorationColor1"
          />
        </linearGradient>
      </defs>

      <path
        :fill="fillColor"
        stroke="transparent"
        stroke-width="0"
        :d="`M 0 ${height * (1/3)}
                L ${width * 0.5} 0
                L ${width} ${height * (1/3)}
                L ${width * 0.5} ${height * (2/3)}
                L 0 ${height * (1/3)}
                `"
      />
      <path
        fill="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>