首页

Appearance

版本记录 ​

v2.5.0 ​

1. ADD: 相机功能
js
// 相机 ‘看向’ 100,100
stage.camera.lookAt(100, 100);
2. 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 },
    ]
);
3. 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);
console.log(imgData); //data:image/png;base64,iVBORw0KG...

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

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

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

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

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.resizeTo(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的重度使用的老项目需谨慎做评估，建议保持现状。

最后更新: