[原创]fabric.js通过代码移动视图的办法

通过调试推算出，要解决 代码移动之后还能拖拽问题，这些上下左右的坐标全部要修改。

https://github.com/fabricjs/fabric.js/issues/5248

currentView.oCoords.bl.x = currentView.left;

                    currentView.oCoords.tl.x = currentView.left;


                    currentView.oCoords.br.x = currentView.left + currentView.width;
                    currentView.oCoords.tr.x = currentView.left + currentView.width;


                    currentView.oCoords.tl.y = currentView.top;
                    currentView.oCoords.tr.y = currentView.top;


                    currentView.oCoords.bl.y = currentView.top + currentView.height;
                    currentView.oCoords.br.y = currentView.top + currentView.height;

或者 setCoords
完整代码

$(document).keydown(function (e) {
        // console.info("on key", e);

        /*

        key:ArrowLeft key:ArrowUp key:ArrowRight key:ArrowDown,keycode:40,metaKey:

        */

        // console.info("key----------:" + e.key + ",keycode:" + e.keyCode + ",metaKey:" + e.metaKey + ",");
        var keysView = canvas.getActiveObjects();
        if (keysView.length > 0) {
            var match = false;
            if (e.key == "ArrowLeft") {

                match = true;
            } else if (e.key == "ArrowUp") {
                match = true;

            } else if (e.key == "ArrowRight") {

                match = true;
            } else if (e.key == "ArrowDown") {

                match = true;
            }


            if (match) {
                for (var i = 0; i < keysView.length; i++) {
                    var currentView = keysView[i];
                    if (e.key == "ArrowLeft") {

                        currentView.left = currentView.left - 1;
                    } else if (e.key == "ArrowUp") {

                        currentView.top = currentView.top - 1;
                    } else if (e.key == "ArrowRight") {

                        currentView.left = currentView.left + 1;
                    } else if (e.key == "ArrowDown") {

                        currentView.top = currentView.top + 1;
                    }
                    var width = currentView.width * currentView.scaleX;
                    var height = currentView.height * currentView.scaleY;


              /*      currentView.scaleX = 0;
                    currentView.scaleY = 0;
                    currentView.zoomX = 0;
                    currentView.zoomY = 0;
                    currentView.width = width;
                    currentView.height = height;*/

                    console.info("width:" + width + ",height:" + height);
                    if (keysView.length == 1) {
                        if (currentView.left < 0) {
                            console.info("左边超出了")
                            currentView.left = 0;
                        } else {

                            if ((currentView.left + width) > canvas.width) {
                                console.info("右边超出了")
                                currentView.left = canvas.width - width;
                            }

                        }

                        if (currentView.top < 0) {
                            console.info("左边超出了")
                            currentView.top = 0;
                        } else {
                            if ((currentView.top + height) > canvas.height) {
                                currentView.top = canvas.height - height;
                                console.info("底部超出了")
                            }

                        }
                        // delete currentView;

                    }
                    /*
                     oCoords.tl.x，oCoords.tl.y //左上角
 oCoords.tr.x ，oCoords.tr.y //右上角
 oCoords.bl.x，oCoords.bl.y //左下角
 oCoords.br.x，oCoords.br.y //右下角角
 */

                    /*
{top: 231, left: 405, width: 70, dirty: false, height: 70, …}                    :
bl
:
i {x: 405, y: 302}
br
:
i {x: 476, y: 302}
tl
:
i {x: 405, y: 231}
tr
:
i {x: 476, y: 231}

*/


                    currentView.oCoords.bl.x = currentView.left;

                    currentView.oCoords.tl.x = currentView.left;


                    currentView.oCoords.br.x = currentView.left + currentView.width;
                    currentView.oCoords.tr.x = currentView.left + currentView.width;


                    currentView.oCoords.tl.y = currentView.top;
                    currentView.oCoords.tr.y = currentView.top;


                    currentView.oCoords.bl.y = currentView.top + currentView.height;
                    currentView.oCoords.br.y = currentView.top + currentView.height;


                    /*currentView.oCoords.tr.y = currentView.top+currentView.width;
                    currentView.oCoords.tr.x = currentView.left+currentView.width;


                    currentView.oCoords.tr.x = currentView.left + currentView.width();
                    */
                    // currentView.setCoords(true, true,)
                    updateSelectViewInfo(currentView, basedata);
                    /*
                    bl
                :
                i {x: 226, y: 400}
                br
                :
                i {x: 297, y: 400}
                tl
                :
                i {x: 226, y: 329}
                tr
                :
                i {x: 297, y: 329}
                */
                    // currentView.update();
                    // currentView.coo

                    canvas.renderAll();
                    // canvas.renderAndResetBound();
                }
                event.preventDefault();
            }


        }