首页

Appearance

版本记录 ​

v2.6.9 ​

- ADD: 几类节点(ImageNode、ShapeNode、SpriteNode、CanvasNode)
- ADD: 增加了扩展模块(extensions)
        - 增加了动效节点：GifNode、WaterLikeNode、BlinkingArrowNode、RatioNode、RipplingNode
        - 工具栏、右键菜单等移到了扩展模块中
- CHG: 增加了多层（Layer）支持
- CHG: 事件处理
    - 统一了不同类型设备下的交互处理（例如: mousedown 改为：pointerdown）
    - 增强了移动设备交互支持，双指拖拽、缩放
- CHG：序列化功能
    - Layer移除了的toFileJson、openJson方法
    - Stage增加的toJSON、fromJSON、toJSONWithBase64方法
- CHG: 优化了相机功能, 增加了：lookAtObject、lookAtContentCenter等方法
- DEL: EffectSystem, 移除了：waterLike、imageFilter、colorFilter、lookAt、xyToCenter等方法
- CHG：命名
    - FoldLink -> LShapeLink
    - FlexionalLink -> ZShapeLink
    - CurveLink -> QuadBezierLink
- CHG: 其他
    - 支持垂直、水平镜像、斜切
    - ID属性由开发人员使用和管理
    - 图元增加了title属性
    - 默认字体从10px改为了12px
    - 优化了树形和星形布局算法
    - Shape的单位化坐标范围从 [-0.5, 0.5] 改为了 [-1, 1]
    - 类型提示更加完善（vscode中智能提示更多）
- FIX: 修复了已知bug

注: 非常大的变化，不兼容旧版本。

v2.5.3 ​

FIX: stage.inputSystem.on('mousewheel')监听不到事件的问题。

v2.5.2 ​

CHG: 一张图片的加载失败不会影响整体显示
FIX: 连线复制粘贴可能报错的问题

v2.5.0 ​

1. ADD: 相机功能
示例代码
js
// 相机 ‘看向’ 100,100
stage.camera.lookAt(100, 100);
1. ADD: PathLink(带路径的Link)
示例代码
js
import { 
    PathLink
} from '@jtopo/core';

const link = new PathLink();
link.setPath(
    [
        { x: -100, y: -100 },
      	{ x: -100, y: 0 },
        { x: 200, y: 200 },
        { x: 300, y: 200 },
    ]
);
1. FIX: 样式和序列化的一些bug修复

v2.4.0 ​

  1. CHG: 性能提升
  2. FIX: 移动设备触摸屏基本支持
  3. FIX: 样式系统完善
    • 主题可以正常动态切换了
    • 不能直接修改style对象的属性，必须通过css()方法设置
js
// 不再支持直接修改style对象
node.style.lineWidth = 3;
node.style.fillStyle = 'red';

// 统一通过css()方法设置
node.css({  
    lineWidth: 3,  
    fillStyle: 'red'
});
  1. ADD: 径向渐变(RadialGradient)、图案(StylePattern)、线性渐变(LinearGradient)
示例代码
js
import {
    RadialGradient,  
    StylePattern,   
    LinearGradient 
} from '@jtopo/core';

// 径向渐变
let rg = new RadialGradient(-5, -5, 4, -8, -8, 32); 
rg.setColors([[0, 'white'], [0.5, 'pink'], [1, 'red']]);
node.css({
    fillStyle: rg
});

// 图案
stage.styleSystem.defClass('.group', {
    fillStyle: new StylePattern('./assets/img/pattern.jpg', 'repeat')
});
  1. CHG: 编辑模式操作体验提升
    • 调整节点尺寸时，按住shift可以等比缩放了
  2. ADD：可以对所有资源加载后做回调处理
  3. ADD: Node对象可以接收drop事件了
示例代码
js
// 接收drop
node.dropAllowed = true; 

node.on('drop', () => { 
    let target = inputSystem.target;
    if(target != null){
        target.changeParent(node);
    }
});
  1. ADD: 脚本功能(序列化的json中可以嵌入js代码了)
示例代码
js
import {Runtime} from '@jtopo/core'; 

function myScript(stage, layer) {
    let fromNode = layer.querySelector('[name="fromNode"]')
    //....
}

// 序列化时把脚本代码嵌入json, 增加了info字段，可以增加画面的额外信息
const withScriptJson = layer.toFileJson({
    script: myScript.toString(), 

    info: { 
        author: 'Jack', 
        date: '2020-01-01', 
        description: 'XXX车间控制图-A'
        //...
    } 
});

// 加载数据
layer.openJson(withScriptJson).then((jsonObj)=>{
    // 执行脚本
    Runtime.execute(jsonObj.script, layer);
});
  1. ADD: 增加一个简单‘液体效果’
示例代码
js
// ‘液体简单模拟’
let waterEffect = effectSystem.waterLike(['#efefef', 'green', 'rgb(0,87,55)'], 80, 80);
let waterNode = waterEffect.objects[0];
waterNode.setXY(200, -200);
layer.addChild(waterNode);
waterEffect.play();

v2.2.2 ​

  1. FIX: 修复折线的lineJoin不生效的问题
  2. FIX: 若干小问题修复

v2.2.1 ​

  1. ADD: 字体工具类-FontUtil, 提供了对指定字体的文本尺寸计算的功能
  2. DEL: 移除对HtmlImage的支持

v2.2.0 ​

1. ADD: 序列化时图片可以内联进json了
2. ADD: 增加一个连线标记效果
3. CHG: 线条流动效果默认循环次数为无限次
4. CHG: 移除加载json的版本对比警告
5. CHG: 支持emoji符号,如：🚫 ❓ ✅ 💤🖥❌ 输入或复制粘贴
6. CHG: 提供了API，可以对自带的快捷键禁用/启用
7. FIX: 对象拖拽事件(mousedrag/mousedragend)触发不正常的问题
示例代码
js
// 序列化时图片内联 
let imageToBase64 = true;
let json = layer.toFileJson(imageToBase64);

// 禁用
stage.keyboard.disable(); 
// 启用
stage.keyboard.enable();

v2.1.0 ​

1. ADD: 可以将指定Node、Link对象转成图片、图片文件可下载到本地
2. ADD: ImageUtil工具类，可以生成带滤镜的图片对象
3. ADD: style增加了常用滤镜效果（高斯模糊、反色、灰度、锐化等9种)
4. CHG: 序列化功能完善
5. FIX: Node背景图片repeat可能出错的问题
示例代码
js
```js 
// 示例
let node = new Node();

// Base64编码
let imgData = stage.exportSystem.toDataURL(node); // [!code ++]  
console.log(imgData); //data:image/png;base64,iVBORw0KG...

// Image 对象
let imgObj = stage.exportSystem.toImage(node); // [!code ++]  
imgObj.onload = ()=> console.log('完成');

// 根据图片生成一个新的Image对象（带 绿色 滤镜）
const greenImg = ImageUtil.colorFilter(imgObj, [0, 255, 0]); // [!code ++]  

// 直接下载对象为图片到本地
stage.exportSystem.saveAsLocalImage(node); // [!code ++]  

// 滤镜
layer.css({
    // 反色 + 高斯模糊
    filter: 'invert(80%) blur(1px)' // [!code ++]  
});
node.css({
    // 灰度
    filter: 'grayscale(100%)' // [!code ++]  
});

v2.0.1 ​

1. FIX: 编辑模式优化：鼠标画线时不舒服，可能连不上的问题。
2. FIX: 加载json后背景网格不自动对齐的问题 
3. CHG: 编辑模式：鼠标画出来的线可以自定义了
4. CHG: Shape的静态属性和方法调整
   1. Shape.outerGrid() 的返回值从坐标数组改为Shape对象
   2. Shape.innerGrid() 的返回值从坐标数组改为Shape对象
示例代码
js
// 当鼠标画出每一条线时，可以对该线条做一些操作
// 下面演示：给鼠标画出的每条线增加一个菱形箭头
editor.onLinkCreate = function (link) {
    let endArrow = new Node();
    endArrow.resize(12, 12);
    endArrow.setShape(Shape.Damond);  // 菱形
    endArrow.css({ fillStyle: 'gray' });

    // 不可被连线 
    endArrow.connectable = false; 
    
    link.setEndArrow(endArrow);
}

// 原来
let points = Shape.innerGrid(rows, cols);

// 调整后:
let shape = Shape.innerGrid(rows, cols);
let points = shape.points;

v2.0.0 ​

v2.0.0的底层架构相对于v1.x.x版本有了非常大的变化，新项目没问题。
如果是v1.x.x的重度使用的老项目需谨慎做评估，建议保持现状。

最后更新: