美文网首页
一、主体功能分析与技术选型

一、主体功能分析与技术选型

作者: 柳暗花明又一匪 | 来源:发表于2019-04-17 17:58 被阅读0次

一、需要实现的基本功能,参考易画门窗

绘图工具
绘图工具
画板、画布展示
工具 包含 形状 属性
边框、门槛 方形、圆形、多边形、自定义 长、宽、边角、颜色、纹理,包括其他隐藏属性
横、竖、拼樘构件、转角构件 方形、弧形 长、宽、边角、颜色、纹理,包括其他隐藏属
平开、推拉 由容器决定 长、宽或弧边弧度长度,包括其他隐藏属
玻璃 有压线、无压线 由容器决定 长、宽或弧边弧度长度,包括其他隐藏属
其他工具 - - -

二、技术上选择SVG

功能主要需求:
1.基本图形绘制,方形、圆形、路径绘制、贝赛尔曲线、物体填充、
2.丰富的事件响应,如鼠标的拖拽、缩放、
3.完善的坐标系统

选择SVG技术的原因:
1.2D的图形界面,并且界面绘制图形对象相对较少
2.展示相对简单,不需要复杂酷炫的效果、
3.相对于canvas,SVG最大的优点就是绘制和控制简单,svg在页面上会生成对应的元素对象也更容易做交互操作。
例如下方代码就是绘制一个圆、一个椭圆和一道黑线,

<svg>
    <circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2" />
    <ellipse cx="250" cy="250" rx="100" ry="200" fill="yellow"/>
    <line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
</svg>

三、D3.js库

D3.js是一种处理文件的基础上data.d3 JavaScript库可以帮助您将数据生命使用HTML,SVG和CSS。D3 基于Web标准的重点给你现代浏览器的全部功能,无需自己绑到一个专有的框架,结合功能强大的可视化组件和DOM操作一个数据驱动的方法。


d3官网.png

SVG方面的JavaScript库有很多常见的有如下:[链接](# 15款制作 SVG 动画的 JavaScript 库
)

但是大多数还主要是针对web页面上的一些交互动画,很多库都是轻量级。
而D3js是应用在web开发上的开源JS组件库,是一个数据可视化工具。就数D3的应用最为广泛。
官方网站的文档也比较完善


各种语言的文档

主要的一些优点:
1.库的功能齐全
2.官方案例非常多,非常丰富。适用范围非常广泛
3.官方文档资料齐全
4.d3js使用广泛,在github上关注的也非常高,对比React 在 github,这意味着d3库会比较完善,遇到问题时在各技术社区会容易找到解决方案。

image.png image.png

关于svg一些设计类web应用参考网站:
Method Draw:https://editor.method.ac/

相关文章

  • 一、主体功能分析与技术选型

    一、需要实现的基本功能,参考易画门窗 二、技术上选择SVG 功能主要需求:1.基本图形绘制,方形、圆形、路径绘制、...

  • 练习React全栈项目:招聘SPA(一)

    第一部分 :准备 1). 项目描述: 整体业务功能/功能模块/主体的技术/开发模式2). 技术选型: 数据展现/用...

  • 微服务之架构技术选型与设计

    本文主要介绍了架构技术选型与设计-微服务选型,Spring cloud 实现采用的技术,希望对您的学习有所帮助。 ...

  • iOS面试的一些小问题

    React vs Vue 前言: 技术选型没有绝对的对与错 技术选型要考虑的因素非常多 表达自己的观点,并说明理由...

  • 技术选型指南

    这是一篇综合类技术选型指南,试图为你提供一份比较通用的技术选型思维框架。当你需要进行技术选型时,可以参照它来设计自...

  • Metal基础入门

    一、背景和技术选型 关于技术方案的选型,最权威的肯定是Metal for OpenGL Developers[ht...

  • 爬虫(3-1 3-2)

    3-1 爬虫技术选型,爬虫能做什么?技术选型:scrapy vs requests+beautifulsoup1....

  • SpringCloud、SpringBoot、SpringClo

    一、SpringCloud与SpringBoot版本 因为我们在做技术选型的时候都是根据SpringCloud的版...

  • 前端技术选型,react, vue , angular2 技术对

    一个项目的开始,往往需要进行技术选型,也是头疼的时候。以下为前端的选型的考虑,给大家提供一个选型思路。 前端技术选...

  • 伴鱼数据库选型的思考,为什么我们 all in TiDB

    作者:伴鱼技术团队 技术选型是由技术方向和业务场景 trade-off 决定的,脱离业务场景来说技术选型是没有任何...

网友评论

      本文标题:一、主体功能分析与技术选型

      本文链接:https://www.haomeiwen.com/subject/dangwqtx.html