lweiyue的专栏

在HTML中，给定一个文本范围，超长的文本会自动换行。但在SVG中，文本是不会换行的，只会超出后被裁剪。两者在样式的写法上基本相同，唯一需要注意的是HTML中的color需要转成SVG里的fill。扫描整个根div，生成一个节点树，标注每个节点的字体信息，以及选中信息。这也是很困难的，因为有些节点已经合并或分裂，选中的位置信息需要更新。，当我们把文字2的字体大小改为14px之后，它就跟文字1一样了，两段文字没必要用两个span，合在一起即可。本项目显示的文本皆是富文本，也就是在一个框里面，文本有多种样式。

最新的操作会被撤销，恢复操作之前的流程图。有一种方式是，保存一张初始图，然后把每次的操作都记录下来。还有一种方法，也是本项目所采用的方法，就是把所有图元的信息保存起来，序列化成一个字符串。当需要撤销时，从Stack里取出字符串，反序列化成图元信息，覆盖当前的图元信息，重新加载和渲染。在上一节中，我们已经提到，在数据保存时，svg数据也保存了下来。当存在图片时，img引用一个svg，svg又引用一张图片，就会显示不出现。项目后端使用.NET开发，在NuGet中引用一个名为Svg的库，即可实现svg的转换。

当鼠标按下时，我们需要判断按下的地方是在图元上（实际上还要分是否选中、是否锁定等情况）还是在空白的地方。最后鼠标弹起，完成一次事件。在所有处理器中，鼠标事件处理器是最为复杂的，因为在整个页面中，基本可以使用鼠标完成所有功能。除此之外，鼠标的动作还需要配置辅助键，例如CTRL和SHIFT，在拖动图元变换时会用到这两个键。每个动作之后，只需要对当前动作作出处理（例如改变光标、记录当前位置等），然后改变状态即可。可以看到，对于上面的动作，如果不断使用if/else去处理，这个代码层次将会非常多和冗长，难以管理。

例如在不保持比例的情况下，只要拖动位置跟“左”有关的，矩形的x坐标和宽度都要修改，而跟“右”有关的，只要修改宽度即可。在计算之前，整棵树的大小是未知的，树摆放在哪里不好把握。我们一开始计算的时候，会假定根节点的坐标是(0,0)，然后计算出每个节点的相对坐标。以内部矩形的左上角为例，L1、L2为组矩形的长和宽，l1、l2是左上角点在两条边上的投影点距离组矩形原点的距离。旋转矩形的描述是rect(x,y,width,height,angle)，直接给定一个鼠标点P(x,y)，无法判断这个点跟旋转矩形的关系。

图元数据描述是本项目开发的一个难点。图元数据的特点包括：（1）图元种类众多，每种图元有自己独特的属性。（2）某些种类的图元存在公共的属性。例如矩形、图片的位置都是通过一个矩形来描述的。（3）管理器对图元有共同的操作。例如把图片数据转化为可视HTML，鼠标拖动时的平移动作等。这些操作在图元内部的实现并不一致。（4）图元存在一些即使而不需要保存的属性，例如是否选中，这是一个不需要保存，每次打开时都有默认值的属性。在本项目中，图元具有以下的数据定义：}这就是图元的基类。

本项目的最终结果是一个同时具有流程图和思维导图功能的Web版制图软件。能够制作出如下图所示的图：项目具有以下的一些功能：类似软件的常规功能：元件库、分组管理、层次管理、锁定管理、图形样式、文字样式、连接线样式等。用户可添加自定义图片，包括png、jpg、gif、svg等格式，以及一种项目自定义的格式。流程图和思维导图可同时在一个页面中完成编辑。思维导图可变换左侧、右侧、底部、双侧等模式。整图转换为png、svg、jpg等格式。文本支持内部多种样式。

把文字包住，字体对应face属性，字体颜色对应color属性，字体大小对应size属性。我们知道，在一个div里加上contenteditable="true"之后，它就变成了一个可编辑的框，而且是能满足基本需求的富文本编辑框。算法的思想是一个字一个字的选取，获取选择部分的位置，当选择部分的y值比第一个字的y值大（而且超过了某个阈值），则从这个字符开始换行了。上文中已经说过，HTML里的文本是会自动换行的，但SVG里的文本不会。如果是BR结点，结束上一行，添加新的一行，只有BR结点这个元素，再新建一行。..

在SVG中，text的基本用法如下：其效果如下图所示： 注意上图中红点的位置坐标即为(20,20)。可以看到，默认情况下，text使用以下默认属性：可以对文字的颜色、字体、字体大小、是否粗体、是否有下划线、是否斜体等进行设置。需要注意的是，样式基本与html相同，除了color，svg中使用fill进行颜色设置。其效果如下图所示：水平对齐的方式有三种，分别是左对齐、居中对齐、右对齐。其设置的属性是text-anchor，对应的值分别是start、middle、end。默认值是start。居中对齐...

作为客户端，Vue项目需要使用服务端地址。但是在开发过程中，服务端地址是经常变化的。而且，如果Vue项目作为不同公司的产品，那么服务地址就是不固定的。显然，我们不能每次就为了一个地址，改完再发布一次。Vue3以前，如果不希望打包的文件，是放在static文件夹下，到了Vue3，改成是public文件夹。可以在此文件夹里新建一个config.json这样的文件存放配置信息，这个文件不会被打包。使用的时候，可以使用require。例如config.json如下所示：{ "name":"my

一、Web端调用C#代码要实现Web端调用C#代码，CefSharp要求先定义一个对象，绑定到浏览器中。我们可以任意定义一个类，里面是需要在网页中调用的方法，如下所示：public class BoundObject{ public void doSomething(string para) { }}然后通过以下语句绑定到浏览器中：Browser.JavascriptObjectRepository.Register("boundCef"

一、开发组件开发组件的过程并无特殊之处，跟平时在Vue项目里定义component是一样的。有一点需要注意的是，平时在Vue项目里，组件的name可以不写，但如果要打包成库，组件的name必须写。为了描述方便，我们把将要打包的组件定义为MyCom1、MyCom2。其示例代码如下：<template> <div> </div></template><script>export default { name: "MyC..

1、安装node.js2、安装yarn：npm install -g yarn3、配置yarn使用淘宝镜像：yarn config set registry https://registry.npm.taobao.org4、安装Vue CLI：yarn global add @vue/cli4、安装Electron：yarn add electron --dev --platform=win64...

首先需要下载模板文件。在使用之前，我们需要先安装好node.js、cnpm、cordova、JDK8（注意一定是8）、Android SDK。安装scss：cnpm install node-sass --save-devcnpm install sass-loader --save-dev添加平台：cordova platform add browserc...

一、初始化项目1、新增一个文件夹，然后cmd进入到文件夹。2、运行以下命令：npm init根据提示，填写相关的信息。完成以后会生成package.json，如下所示：{ "name": "frontlib", "version": "1.0.0", "description": "", "main": "dist/index.js", "types":...

Vue组件通信有几种情况，父->子，子->父，或是非父子关系的组件间通信。我们这里讨论的是比较普遍的情况，也就是非父子关系组件间的通信。当然，如果它们是父子关系，也是可以用这些方法的。我们这里介绍两种方法，一是使用Vuex组件，二是使用Bus。一、Vuex组件Vuex是一个专门用于状态管理的组件。所谓状态，就是一个变量值，一个组件使用这个变量的值，如果另一个组件修改了这个变量的...