Question

我定义了一个绘图面板和一些使用SVG路径相互连接的组件。我需要在移动组件时重绘表面上的连接路径。有我的绘图面板

{
    xtype : 'panel',
    flex : 5,
    split : true,
    region : 'center',
    plain : true,
    itemId : 'idCenterRegion',
    id : 'centerRegion',
    border : 1,
    layout : {
        type : 'fit',
    },
    defaults : {
        autoScroll : true
    },
    listeners : {
     afterrender : 'setDDTarget'
    },
    items: [{
        xtype : 'draw',
        itemId : 'idDrawPanel',
        renderTo:Ext.getCmp('centerRegion'),
    }]
    }

浮动窗口正在使用绘图/拖放添加到centerregion。还有另一个控制器可以在表面上绘制精灵，

printPath : function(drawItem) {
    var source=drawItem.source;
    var target=drawItem.target;

    var surface = Ext.getCmp('centerRegion').down('draw')
            .getSurface('main');
    var color = "#000";

    var line1,line2;

    var posSource=[];
    var posTarget=[];
    if(source.left<target.left){
        posSource[0]=source.left+source.width;
        posTarget[0]=target.left;
        line1=15;
        line2=-15;
    }else{
        posSource[0]=source.left;
        posTarget[0]=target.left+target.width;
        line1=-15;
        line2=15;
    }

    posSource[1]=source.top+source.height/2;
    posTarget[1]=target.top+target.height/2;

    var path = [ "M", posSource[0],
                 posSource[1], "H",
                 posSource[0] + line1, "L",
                 posTarget[0] + line2, posTarget[1], "H",
                 posTarget[0] ].join(",");

    surface.add({
        type : 'path',
        path : path,
        stroke : color,
        fill : 'none',
        'stroke-width' : 2,
        surface : surface,
    }).show(true);

},

连接此面板上的任何项目时，它会绘制精灵但不会在浏览器上显示。但如果我重新调整绘图面板或浏览器窗口的大小，会显示精灵，我找不到任何理由发生这种情况。

我应该使用不同的方式刷新视图吗？

这是重新调整屏幕大小之前的结果，但是成功完成了sprite方法的添加。 without resize

此屏幕截图是在重新调整中心区域的大小之后，如您所见，精灵现在可见。但任何事件都没有在重新调整大小的行动时手动触发。

after resize

Answer 1

我解决了这个问题，它看起来像一个技巧，但绘制容器现在运作良好。我在绘图容器的'add'监听器上调用手动绘制容器的resizeHandler 在centerRegion上添加子窗口时，它只会触发一次（第一次添加时）。

下面有我的解决方案，首先给出一个'添加侦听器引用来绘制容器：

{
    xtype : 'draw',
    itemId : 'idDrawPanel',
    renderTo:Ext.getCmp('centerRegion'),
    listeners : {
      add: 'addToDrawPanel'
    },
}

功能：

addToDrawPanel:function( d, component, index, eOpts ){
    var s=d.getSize();
    var rh= d.getResizeHandler();
    rh.call(d,s);
}

如何在ExtJS5中重绘或重绘表面？

1 个答案: