svg画简单的立方体

2024-05-28 20:20
文章标签 简单 立方体 svg

本文主要是介绍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'
}
关键绘制部分代码
<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>

这篇关于svg画简单的立方体的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1011593

相关文章

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例:修改表在数据库中,表的操作主要

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

如何使用Python实现一个简单的window任务管理器

《如何使用Python实现一个简单的window任务管理器》这篇文章主要为大家详细介绍了如何使用Python实现一个简单的window任务管理器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 任务管理器效果图完整代码import tkinter as tkfrom tkinter i

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

Python实现PDF与多种图片格式之间互转(PNG, JPG, BMP, EMF, SVG)

《Python实现PDF与多种图片格式之间互转(PNG,JPG,BMP,EMF,SVG)》PDF和图片是我们日常生活和工作中常用的文件格式,有时候,我们可能需要将PDF和图片进行格式互转来满足... 目录一、介绍二、安装python库三、Python实现多种图片格式转PDF1、单张图片转换为PDF2、多张图

使用EasyExcel实现简单的Excel表格解析操作

《使用EasyExcel实现简单的Excel表格解析操作》:本文主要介绍如何使用EasyExcel完成简单的表格解析操作,同时实现了大量数据情况下数据的分次批量入库,并记录每条数据入库的状态,感兴... 目录前言固定模板及表数据格式的解析实现Excel模板内容对应的实体类实现AnalysisEventLis

Java中数组转换为列表的两种实现方式(超简单)

《Java中数组转换为列表的两种实现方式(超简单)》本文介绍了在Java中将数组转换为列表的两种常见方法使用Arrays.asList和Java8的StreamAPI,Arrays.asList方法简... 目录1. 使用Java Collections框架(Arrays.asList)1.1 示例代码1.

Java8需要知道的4个函数式接口简单教程

《Java8需要知道的4个函数式接口简单教程》:本文主要介绍Java8中引入的函数式接口,包括Consumer、Supplier、Predicate和Function,以及它们的用法和特点,文中... 目录什么是函数是接口?Consumer接口定义核心特点注意事项常见用法1.基本用法2.结合andThen链

C++初始化数组的几种常见方法(简单易懂)

《C++初始化数组的几种常见方法(简单易懂)》本文介绍了C++中数组的初始化方法,包括一维数组和二维数组的初始化,以及用new动态初始化数组,在C++11及以上版本中,还提供了使用std::array... 目录1、初始化一维数组1.1、使用列表初始化(推荐方式)1.2、初始化部分列表1.3、使用std::

redis群集简单部署过程

《redis群集简单部署过程》文章介绍了Redis,一个高性能的键值存储系统,其支持多种数据结构和命令,它还讨论了Redis的服务器端架构、数据存储和获取、协议和命令、高可用性方案、缓存机制以及监控和... 目录Redis介绍1. 基本概念2. 服务器端3. 存储和获取数据4. 协议和命令5. 高可用性6.