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的属性。

此时在将图片拉伸即可动态填充。直接将此json存至数据库即可。

保存的逻辑处理好之后，就完成了。下次直接从数据库都时，初始化方法将不考虑color中的具体值，而直接返回使用此模板的画笔。