[英]How to scroll my canvas while creating a connection in draw2d-js?
I have two figures, one in the visible area of my canvas and one outside (on the right).我有两个人物,一个在画布的可见区域,一个在外面(右侧)。 It is not possible to make a connection because I can't reach the other figure.无法建立联系,因为我无法接触到另一个人影。 Is it possible to autoscroll, to the right while creating a connection so I can connect to that figure?是否可以在创建连接时向右自动滚动,以便我可以连接到该图形?
Unfortunately you will have to handle the scrolling on your own.不幸的是,您将不得不自己处理滚动。 Try something like this尝试这样的事情
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.
}
})
Canvas policy:画布政策:
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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.