如何在draw2d-js中创建连接时滚动我的画布？答案

【问题标题】：How to scroll my canvas while creating a connection in draw2d-js?如何在draw2d-js中创建连接时滚动我的画布？
【发布时间】：2017-02-28 20:46:51
【问题描述】：

我有两个人物，一个在画布的可见区域，一个在外面（在右侧）。无法建立联系，因为我无法联系到其他人。是否可以在创建连接时向右自动滚动，以便我可以连接到该图？

【问题讨论】：

标签： javascript draw2d-js

【解决方案1】：

不幸的是，您将不得不自己处理滚动。试试这样的

var canvas = new draw2d.Canvas("canvas_id");
var scrollElement = canvas.getScrollArea();
var viewArea = new draw2d.geo.Rectangle(
                            scrollElement.scrollLeft(), scrollElement.scrollTop(),
                            scrollElement.width() * canvas.zoomFactor, scrollElement.height() * canvas.zoomFactor);

var outputLocator  = new draw2d.layout.locator.OutputPortLocator();
var port = figure.createPort("output", outputLocator);

port.on('drag', function(){

  if (!viewArea.contains(port.getBoundingBox())) {
    // -- the port has moved off the visible area of the canvas so scroll the view.   
  }
})

【讨论】：

嗨，Thomas，我没有用上面的代码管理它，而是创建了另一个解决方案。通过使用不同的连接路由器和自己的画布策略，我能够从画布上读出鼠标位置和滚动条。使用该代码，我可以创建一个自动滚动选项。

【解决方案2】：

画布政策：

var myScroll = draw2d.policy.canvas.CanvasPolicy.extend ({ NAME: 'myScroll',
                init: function() {
                this._super();
              },


onMouseMove: function(the, mouseX, mouseY, shiftKey, ctrlKey) {

        this._super(the, mouseX, mouseY, shiftKey, ctrlKey);

        if (mouseX>the.getWidth()-100+the.getScrollLeft()) { 

            $buffer = $("#canvas").scrollLeft();
            $treshold = 10;
            $("#canvas").scrollLeft($buffer+$treshold);


        }
}

【讨论】：