Canvas--基于SVG封装的网页绘图组件(未完待续)

注:源码已放在github上,地址为:https://github.com/Wellla/canvas.git,需要使用的同学自行下载(自己比较懒,没有做mesh)
    
  前言:Canvas,没错,这个名字和大明鼎鼎html5的canvas同名,因为再也没什么名有这么形象,组件也是在raphael的基础上进行了“面向对象”的封装,这个组件是我来公司第一个月写出来的,不过因为当时写出来了交由前端同事维护,也一直没时间去管,今天有时间才把一直没完成的平面三角坐标系模型和外部连线算法弄完,打算分享给大家,一是本着开源精神,大家一起学习进步,二是使用文字写出自己在整个组件中关于“面向对象、面向抽象”思想的使用,能把自己的想法完完整整表达出来对自己也是一种进步嘛!不妥之处,望大家指出;
    
    废话不多说,先介绍一下这个组件的主要功能,可绘制拓扑图、流程图、关系图等,下面附上效果图:

  


    
    接着,介绍几个组件的构成:
    Canvas:画布管理对象
    Container:容器(核心封装)
    Line:连线
    Tiny:缩略图插件
    Edit:编辑器插件
    Util:三角坐标系模型的算法atan、直线连线算法link、可旋转箭头arrow、折线pathZ、贝塞尔曲线pathS

Canvas:为整个画布上元素的管理者、向外部提供创建容器、连线、序列化、反序列化、创建备忘、删除元素等方法,并作为全局对象拥有画布上上所有元素的访问控制权限
Container:是基于“组”的概念的封装、组可以包含文字、图片、矢量图、连线对象等,组中元素以相对位置存放在组中,同时“组”是一个抽象对象,是一个理论上的区域限制、包含处理器handler、边界bbox等抽象属性,因此,组也可一作为组的一个子对象.组向外部提供添加元素、删除、序列化、拖拽等对“组”的操作方法
Line:连线是Container组件关系的维系者、每条连线对象上拥有线两端的对象、并提供删除、序列化、拖拽、动画等方法,线条类型可从Util中获取
Tiny:使用插件的方式和canvas分离、通过视口的变化进行对canvas的投射和控制
Edit:使用插件方式集成到画布中,一个编辑器对应一个编辑规则,可使用多种编辑器在画布中切换,主要用于对container的编辑、因使用插件方式,编辑器是依附在container上,所以极大节省了内存开销
Util:算法工具类、主要包含构建网页三角直角坐标系、连线算法、旋转算法、线条算法

还存在的问题:组元素的使用,向外部提供方法而回收属性访问权的更抽象的抽象。。。

时间: 2024-11-15 16:07:57

Canvas--基于SVG封装的网页绘图组件(未完待续)的相关文章

练武场之“封装、继承”攻略(未完待续)

如题: 使用继承编写Person.Student类 编写Person类: 属性有:姓名.年龄.出生日期 方法有:showInfo(); 编写Student类: 属性有:姓名.年龄.出生日期.学校 方法有:showInfo(); study(); 使用继承优化Student类. Ready Go! 第一步 Person类 1 package a; 2 //父类 3 public class Person { 4 // 为了让成员变量隐藏(封装),便于对值制定规则:否则变量会被直接赋值. 5 pri

基于SVG.js实现网页初始化线条描绘效果

前端实现看到一个网页的效果很cool(参考https://tympanus.net/Development/SVGDrawingAnimation/index2.html),决定自己去实现以下这个效果,并且封装成一个js插件供大家简单去实现该效果: 目前,已经实现了三种效果(描绘容器的边框,描绘线状统计图样式,描绘饼状统计图样式): 使用方法: 1.首先引入jquery和svg.js 2.然后引入svg.webInitAnimation.js 3.定义自己的dom元素 4.选择想要绘制的样式添加

基于taro封装底下浮动弹窗组件

先看效果图: jsx: import Taro, { Component } from '@tarojs/taro' import { View, Image } from '@tarojs/components' import closeImg from '../../images/icons/close.png' import './FloatLayout.scss' interface IProps { isOpened: boolean, onClose: Function, title

自己平时感觉好用的封装的常见方法-未完待续

写入创建txt文件 /// <summary> /// 生成文件 /// </summary> /// <param name="content">文件内容</param> public void CreatePage(string content, string filename) { try { if (!System.IO.Directory.Exists(filename.Substring(0, filename.LastInd

基于ElementUI封装可复用的表格组件

<template> <section class="ces-table-page"> <!-- 表格操作按钮 --> <section class="ces-handle" v-if='isHandle'> <el-button v-for='item in tableHandles' :key='item.label' :size="size || item.size" :type=&qu

canvas和svg小记

一.关于canvas <canvas> 是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形 例如,它可以用于绘制图形,创建动画. <canvas> 最早由Apple引入WebKit 我们可以使用<canvas>标签来定义一个canvas元素,canvas标签的两个属性<canvas> 看起来和 <img> 元素很相像,唯一的不同就是它并没有 src 和 alt 属性. 实际上,<canvas> 标签只有两

总结:canvas与svg的区别

canvas(画布{位图}) 1.最好不要在style中给canvas设置宽高,会有位移差 2.canvas样式: . 绘制矩形: fillRect()  绘制一个填充的方块,默认颜色是黑色 strokeRect()绘制带边框的方块 绘制线条 moveTo()绘制线段的起点 lineTo()绘制线段的邻点 每个线条只能有一个moveTo可以有多个lineTo() stroke()绘制线段 beginPath(),closePath()二者同时出现,将绘制路径闭合(起始点,结尾点首尾相连) Rec

canvas和SVG分析比较

Canvas 和 SVG 之间的主要相似点为: 它们都是有效的图形工具,可用来快速创建在网页中显示的轻型图形:它们都使用 JavaScript 和 HTML:它们都遵守万维网联合会 (W3C) 标准. 这两种技术之间的主要区别是: Canvas 是基于像素的即时模式图形系统,最适合较小的表面或较大数量的对象,canvas不支持鼠标键盘等事件 SVG 是基于形状的保留模式图形系统,更加适合较大的表面或较小数量的对象.Canvas 和 SVG 在修改方式上还存在着不同.绘制 Canvas 对象后,不

Canvas VS . SVG

SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 SVG 中,每个被绘制的图形均被视为对象.如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形. SVG 的优势 与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于: SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索.索引.脚本化或压缩 SVG 是可伸缩的