Question

与标题相同。我需要禁用上下或左右大小。

Answer 1

我认为mxgraph没有开箱即用的方法来实现此目的，但是您可以通过在mxgraph对象中引入2个新的成员变量来轻松定制mxgraph库来实现此目的，并且当为图表设置值时，相应地禁用大小调整（上下或左右）。我将在下面提供一个示例，说明如何实现以下方案。

首先将两个新属性引入mxGraph对象

mxGraph.js

mxGraph.prototype.disabledTopBottomResizing= false;
mxGraph.prototype.disabledLeftRightResizing= false;

mxGraph.prototype.isDisabledTopBottomResizing = function()
{
  return this.disabledTopBottomResizing;
};

mxGraph.prototype.isDisabledLeftRightResizing = function()
{
  return this.disabledLeftRightResizing;
};

然后您要做的就是转到 js / handler / mxVertexHandler.js 并应用您的逻辑，以便您根据自己的喜好在单元格周围创建可拖动边界（根据哪个您设置为true的上述新引入的属性。

mxVertexHandler.js

替换下面的代码

if (this.sizers.length >= 8)
        {
            var crs = ['nw-resize', 'n-resize', 'ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize'];

            var alpha = mxUtils.toRadians(this.state.style[mxConstants.STYLE_ROTATION] || '0');
            var cos = Math.cos(alpha);
            var sin = Math.sin(alpha);

            var da = Math.round(alpha * 4 / Math.PI);

            var ct = new mxPoint(s.getCenterX(), s.getCenterY());
            var pt = mxUtils.getRotatedPoint(new mxPoint(s.x, s.y), cos, sin, ct);

            this.moveSizerTo(this.sizers[0], pt.x, pt.y);
            this.sizers[0].setCursor(crs[mxUtils.mod(0 + da, crs.length)]);

            pt.x = cx;
            pt.y = s.y;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[1], pt.x, pt.y);
            this.sizers[1].setCursor(crs[mxUtils.mod(1 + da, crs.length)]);

            pt.x = r;
            pt.y = s.y;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[2], pt.x, pt.y);
            this.sizers[2].setCursor(crs[mxUtils.mod(2 + da, crs.length)]);

            pt.x = s.x;
            pt.y = cy;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[3], pt.x, pt.y);
            this.sizers[3].setCursor(crs[mxUtils.mod(7 + da, crs.length)]);

            pt.x = r;
            pt.y = cy;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[4], pt.x, pt.y);
            this.sizers[4].setCursor(crs[mxUtils.mod(3 + da, crs.length)]);

            pt.x = s.x;
            pt.y = b;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[5], pt.x, pt.y);
            this.sizers[5].setCursor(crs[mxUtils.mod(6 + da, crs.length)]);

            pt.x = cx;
            pt.y = b;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[6], pt.x, pt.y);
            this.sizers[6].setCursor(crs[mxUtils.mod(5 + da, crs.length)]);

            pt.x = r;
            pt.y = b;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[7], pt.x, pt.y);
            this.sizers[7].setCursor(crs[mxUtils.mod(4 + da, crs.length)]);

            this.moveSizerTo(this.sizers[8], cx + this.state.absoluteOffset.x, cy + this.state.absoluteOffset.y);
        }

与此

         if (this.sizers.length >= 8)
        {
            var crs = ['nw-resize', 'n-resize', 'ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize'];

            var alpha = mxUtils.toRadians(this.state.style[mxConstants.STYLE_ROTATION] || '0');
            var cos = Math.cos(alpha);
            var sin = Math.sin(alpha);

            var da = Math.round(alpha * 4 / Math.PI);
            var ct = new mxPoint(s.getCenterX(), s.getCenterY());
            var pt = mxUtils.getRotatedPoint(new mxPoint(s.x, s.y), cos, sin, ct);

            if(this.graph.disabledLeftRightResizing){
                pt.x = cx;
                pt.y = s.y;
                pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

                this.moveSizerTo(this.sizers[1], pt.x, pt.y);
                this.sizers[1].setCursor(crs[mxUtils.mod(1 + da, crs.length)]);


                pt.x = cx;
                pt.y = b;
                pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

                this.moveSizerTo(this.sizers[6], pt.x, pt.y);
                this.sizers[6].setCursor(crs[mxUtils.mod(5 + da, crs.length)]);

            }


            else if(this.graph.disabledTopBottomResizing){
                pt.x = s.x;
                pt.y = cy;
                pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

                this.moveSizerTo(this.sizers[3], pt.x, pt.y);
                this.sizers[3].setCursor(crs[mxUtils.mod(7 + da, crs.length)]);


                pt.x = r;
                pt.y = cy;
                pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

                this.moveSizerTo(this.sizers[4], pt.x, pt.y);
                this.sizers[4].setCursor(crs[mxUtils.mod(3 + da, crs.length)]);
            }


            this.moveSizerTo(this.sizers[8], cx + this.state.absoluteOffset.x, cy + this.state.absoluteOffset.y);
        }

这样，将根据您创建的图形的类型禁用左右可调整大小的边界

像这样创建mxgraph对象

        var model = new mxGraphModel();
        graph = new mxGraph(container, model);
        //to disable top-bottom resizing  
        graph.disabledTopBottomResizing = true;
        //or 
        graph.disabledLeftRightResizing = true; //to disable left-right resizing

希望这对您或社区的其他成员有所帮助，因为这个问题是在几周前提出的：）

Mxgraph-如何禁用顶部/底部大小调整-左移和右移？

1 个答案: