gojs 将图片作为画笔时的序列化储存

本文主要是介绍gojs 将图片作为画笔时的序列化储存，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在项目开发中遇到问题，将轨道图片进行拉长，达到长轨道的目的。

但是动态渲染出轨道显然是麻烦的事情。因此通过查找api，找到了一种将图片作为画笔的方法。

链接为点击打开链接中的：Pattern Brushes

但是此方法有弊端，官方人员也说了，Brushes are automatically converted into JSON by the Model.toJson and fromJson methods. Of course, there is a limit to what kinds of brushes that can be faithfully converted -- it cannot handle patterns.【点击打开链接】

因此需要有一种方法将用图片当成笔刷的方法并且可以保存json。

以下是我进行的方法。

首先需要进行初始化一个图片笔刷：

        var img = new Image();img.src = 'track.png'; var patternBrush = objGo(go.Brush, "Pattern", { pattern: img});

然后初始化一个图片笔刷模板

        var trackPenTemplate =objGo(go.Node, "Spot",{resizable: true,resizeObjectName: 'SHAPE',locationSpot: new go.Spot(0, 0, 25, 25) //控制鼠标拖拽过来后的位置},new go.Binding("position", "pos", go.Point.parse).makeTwoWay(go.Point.stringify), objGo(go.Shape, "Rectangle",{ name: 'SHAPE', strokeWidth: 0,stroke: null,width:30,height:30,minSize: new go.Size(30, 30),},new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),new go.Binding("fill","color",function(){return patternBrush}) ));

注意红色字体中重新定义了填充，与官网不同的是我不考虑fill中具体的填充值是什么，而是如果节点用了此模板，则直接返回填充的笔刷。因此在json中，fill对应的color属性填任何值都没关系。因为直接return 了笔刷。

接着，进行逻辑处理：首先是初始化节点---保存节点---读取节点。

如何初始化这个节点？我的方法是：首先定义一个工具画布，将此节点直接放置于工具画布上。因此，他就有了对应的属性映射关系：

myPalette.model = new go.GraphLinksModel([ {text: "货架",text2:"0", color: "pink", size: "50 50"    ,category:"shape" },{category:"four","size":"100 50","text":"货场"},{text: "生产区",category:"sec" },{category:"pic",color:"123"},{category:"pic2",color:"123"}]);

此时当将这个节点拖拽至主画布时，对应的节点也将成为color:123的属性。