09 2018 档案

摘要：今天花了一个小时对页面略做了一些美化，看起来更专业了点， 主要是一些背景图片之类的样式调整，初学者可以看下，如何切分spirit图片，以及LI中的元素如何垂直居中的问题（解决方案是li设置height和line-height相同）,增加了一个span用于显示图片，它的对齐花了点时间。 代码如下： s 阅读全文

摘要：前面示例都只是展示在桌面浏览器显示，当用手机浏览器打开时发现无法拖动元素，虽然实际业务上，手机也只是用来查看的，但为了论证手机上的触摸事件，我还是在本节做个演示。 手机上触控有三个重要事件touchstart,touchmove,touchend,分别表示开始触摸，移动，及结束，与鼠标的moused 阅读全文

摘要：本节论述如何进行组件的删除，如下图。 其操作过程肯定是先要选定要删除的组件，并显示出删除按钮，当然取消选择的时候要隐藏按钮，点击删除组件后，除了组件本身被删除，与之相连的连线也要删除， 理清楚这个过程，我们就可以设计一个删除按钮的指示器 注意此处就不需要扩展Component组件了，直接定义它的原型 阅读全文

摘要：前面章节已讲到如何在两个组件间通过曲线（贝塞尔曲线）进行连接，一般在实际应用中，贝塞尔曲线在数据流图、思维导图中应用比较多，许多如组织架构图等通过折线连接，本文在之前的基础上如何快速实现两个组件间的折线连接： 之前示例是用checkbox来指示是否画线状态，现在增加了一种线条所以需要修改一下用三种状 阅读全文

摘要：关键字：设计器源代码，Web设计器，工作流设计器，jQuery插件，组态设计器，SCADA系统设计器，流程图设计，表单设计建模，报表设计，可视化，设计时，运行时，轻量级开放平台. 组件应该可以被调整大小，正常的操作是鼠标选中组件后，组件四个方向的边框上出现锚点，鼠标拖动锚点到目标位置后松开，重绘组件 阅读全文

摘要：前面示例我建立了三种形状的组件，圆、矩形、椭圆，本节我将再扩展两种类型：图片和动画，并通过这个过程来论证前面OOP的编程是如何简化扩展工作的： 首先要在工具条里增加这两个组件，以便可以拖动： 然后要增加两个Component的继承类： 注意其实动画效果也是通过图片来变换坐标实现，如此处进行旋转，并通 阅读全文

摘要：上节讲到如何创建组件，清除设计器视图，以及设计视图的持久化和恢复，本节将重点讲如何实现组件间的连线，前面章节有提到为了方便从持久化文件中恢复，组件和连线是分别存放的：nodes和lines对象，两个组件实现连线主要也还是通过鼠标拖动事件实现，但前提是有一个连接点的概念，即我们要从组件上、下、左、右四 阅读全文

摘要：关键字：设计器源代码，Web设计器，工作流设计器，jQuery插件，组态设计器，SCADA系统设计器，流程图设计，表单设计建模，报表设计，可视化，设计时，运行时，轻量级开放平台。 上节讲到如何通过OOP思路设计设计器视图和元素，本节将重点讲述设计视图上的元素管理（创建组件，清除组件，打开文件，持久化 阅读全文

摘要：面向对象编程三要素：封装、继承、多态，在这节中将结合设计器的组件设计来阐述javascript如何实现。 1.封装：在设计器中的组件是很适合来说明封装的概念，组件是可以拖放到设计器画布上的元素，他可以有不同的形状，不同的背景，但通过抽象和提炼后具备以下共性 都可以拖放到画布上 都可以被选中和反选 都 阅读全文

摘要：众所周知，设计器在组件拖到设计视图上需要选中（选中后设置属性），拖动变换位置，前面示例已经可以将圆、矩形、椭圆拖到设计器上了，本文详细说明如何选中和拖动。 选中操作就是要在图形边上增加高亮边框和锚点。幸运的是paper.js提供选择/取消选择的方法（具体参考paperjs.org)。 代码片断：（创 阅读全文

摘要：前面一文已经创建了一个Jquery插件，并在初始化时渲染了一个红色的矩形，作为一个设计器，最常用的操作是直接从面板中将组件拖到画布上生成实例，本文主要讲述如何通过拖动组件来显示。 html元素是支持拖动的，主要通过 draggable="true"来允许元素可被拖动，以及三个事件dragstart( 阅读全文

摘要：上文提到计划开发的一个支持用户扩展的开放设计器平台，它基于Html5，纯JS，考虑到方便用户进行引用和扩展，定义成一个单独的js组件的形式，本文重点就如何设计JS组件做一个详细说明。 设计组件前，我们先要思考组件如何初始化，首先既然是图形化的，那就必须用到HTML5的Canvas元素，开发人员先在页 阅读全文

摘要：当一个软件为了达到一定的业务扩展性时（产品上线后限定范围内的用户需求无需变更代码，通过简单的配置可满足用户的要求），必然要求软件是可配置的。 笔者过去开发过很多配置型的管理软件，从可配置的表单设计（Form Designer)，报表设计(Report Designer)，到工作流设计(Workflo 阅读全文