问如何用Fabric.js实现画布平移

EN

我在jsfiddle上做了一个例子，我们实际上可以将整个画布和它的所有对象拖到父div中，就像图片一样，我将尝试一步一步地解释它。

​

​

1. 首先我下载了拖动库jquery.dradscroll.js，你可以在网上找到它。这是一个很小的js文件，只要稍加修改，就可以帮助我们完成任务。下载链接：Code.htm
2. 创建容纳我们画布的容器。
3. 小css .content{溢出:auto；宽度:400；高度:400；}
4. javascript： 创作画布。 使默认光标，当它超过画布时，张开手 canvas.defaultCursor = 'url(" http://maps.gstatic.com/intl/en_us/mapfiles/openhand_8_8.cur") 15 15, crosshair'; c.重写__onMouseDown函数，以更改关闭的游标(末尾)。 fabric.Canvas.prototype.__onMouseDown =函数(E){ //只接受左击变量isLeftClick =‘哪’？e.which === 1: e.button === 1；if (!isLeftClick && !fabric.isTouchSupported) {返回；} if (this.isDrawingMode) { this._onMouseDownInDrawingMode(e)；} //忽略，如果此时正在转换某个对象，如果(this._currentTransform) {返回；} var ==== this.findTarget(e)，指针= this.getPointer(e，true)；//保存指针以检查__onMouseUp事件this._previousPointer =指针；var shouldRender =this._shouldRender(目标、指针)，shouldGroup = this._shouldGroup(e，目标)；if (this._shouldClearSelection(e，目标)){ this._clearSelection(e，目标，指针)；} if (shouldGroup) { this._handleGrouping(e，目标)；shouldGroup= this.getActiveGroup()；} if (target & target.selectable &shouldGroup){ this._beforeTransform(e，target)；this._setupCurrentTransform(e，target)；} //我们必须将活动图像放置在顶层画布shouldRender & this.renderAll()；this.fire(‘鼠标:向下’，{塔吉特:目标，e: e })；塔吉特&target.fire(鼠标向下，{ e: e })；如果(！canvas.getActiveObject()\x{canvas.getActiveGroup()){ flag=true；//将光标更改为closedhand.cur canvas.defaultCursor = 'url("8.cur“) 15，十字头发‘；}//如果
5. 重写__onMouseUp事件，将光标更改为openhand。 fabric.Canvas.prototype.__onMouseUp =函数(E){if(标志){ canvas.defaultCursor = 'url(“8.cur“) 15，十字线‘；flag=false；}；
6. 初始化dragScroll()以处理承载画布的内容： $('.content').dragScroll({})；
7. 对jquery.dragScroll.js文件进行一些小的更改，以便了解何时拖动画布，何时不拖动。在mousedown()事件中，我们添加一个if语句来检查我们是否有一个活动对象或group.If真，没有画布拖放。 $($scrollArea).mousedown(函数(e) { if (canvas.getActiveObject()欧元/ canvas.getActiveGroup()) {console.log(‘无拖动’)；}console.log{console.log(‘body’))；( i++) { if ($(e.target).hasClass(options.limitToi)) { doMousedown(e)；}}{ doMousedown(e)；}}；
8. 在鼠标向下的事件中，我们获取DOM元素(.content)，并获取顶部和左侧位置 函数doMousedown(e) { e.preventDefault()；down = true；x= e.pageX；y= e.pageY；top =doMousedown // .content left = e.target.parentElement.parentElement.scrollLeft;// .content }
9. 如果我们不希望滚动条可见： .content{溢出:隐藏；宽度:400；高度:400； }
10. 但是有一个小问题，jsfiddle只接受https库，所以它会阻塞编译is，除非您从'https://rawgit.com/kangax/fabric.js/master/dist/fabric.js‘中添加它，但是它仍然会阻塞它几次(至少在我的chrome和mozilla上)。

弹琴示例：https://jsfiddle.net/tornado1979/up48rxLs/

你可能比我更幸运，在你的浏览器，但它肯定会在你的现场应用程序工作。

不管怎样，我希望能帮上忙，祝你好运。