svg中自动吸附靠近的物体

Posted Maud

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了svg中自动吸附靠近的物体相关的知识,希望对你有一定的参考价值。

var attractSwitch = true;//自动吸附开关,true 为开启,否则关闭

//矩形物体类别枚举
var T_PDU = ‘PDU‘;
var T_AC = ‘AC‘;
var T_CABINET = ‘CABINET‘;
var T_FLOOR = ‘FLOOR‘;


var magicalLength = 10;//矩形物体边缘的垂直距离小于等于此长度则自动吸附

var rectsPdu = new ArrayList();
var rectsAC = new ArrayList();
var rectsCabinet = new ArrayList();
var rectsFloor = new ArrayList();
/**
 * 吸附
 */
function attract(moveObj) {
    if (!attractSwitch) {
        return null;
    }
    var findAttractObj = false;
    var currentXOffset = 10000;
    var currentYOffset = 10000;
    for (var i = 0; i < rectsPdu.size(); i++) { //遍历PDU
        var item = rectsPdu.get(i);
        if (!item.equals(moveObj)) {               //若不是当前移动的PDU
            if (moveObj.underneath(item)) {//移动的物体在下侧
                if (!moveObj.onRight(item) && !moveObj.onLeft(item)) {
                    var length = moveObj.y - (item.y + item.height);
                    if (length <= magicalLength) {
                        findAttractObj = true;
                        if (length < Math.abs(currentYOffset)) {
                            //moveObj.y = moveObj.y - length;
                            currentYOffset = -length;
                        }
                        // return moveObj;
                    }
                }
            } else if (moveObj.onLeft(item)) {//移动的物体在左侧
                if (!moveObj.onTop(item) && !moveObj.underneath(item)) {
                    var length = item.x - (moveObj.x + moveObj.width);
                    if (length <= magicalLength) {
                        findAttractObj = true;
                        if (length < Math.abs(currentXOffset)) {
                            // moveObj.x = moveObj.x + length;
                            currentXOffset = length;
                        }
                        //  return moveObj;
                    }
                }
            } else if (moveObj.onTop(item)) {//移动的物体在上侧
                if (!moveObj.onRight(item) && !moveObj.onLeft(item)) {
                    var length = item.y - (moveObj.y + moveObj.height);
                    if (length <= magicalLength) {
                        findAttractObj = true;
                        if (length < Math.abs(currentYOffset)) {
                            //moveObj.y = moveObj.y + length;
                            currentYOffset = length;
                        }
                        // return moveObj;
                    }
                }
            } else if (moveObj.onRight(item)) { //移动的物体在右侧
                if (!moveObj.onTop(item) && !moveObj.underneath(item)) {
                    var length = moveObj.x - (item.x + item.width);
                    if (length <= magicalLength) {
                        findAttractObj = true;
                        if (length < Math.abs(currentXOffset)) {
                            //moveObj.x = moveObj.x - length;
                            currentXOffset = -length;
                        }
                        // return moveObj;
                    }
                }
            } else {//移动物体和目标交叉
                continue
            }
        }
    }
    if (findAttractObj) {
        if (currentXOffset < magicalLength) {
            moveObj.x = moveObj.x + currentXOffset;
        }
        if (currentYOffset < magicalLength) {
            moveObj.y = moveObj.y + currentYOffset;
        }
        return moveObj;
    }
    return null;

}

function add(obj) {
    if (rectObj.rType == T_PDU) {
        rectsPdu.add(obj);
    } else if (rectObj.rType == T_AC) {
        rectsAC.add(obj);
    } else if (rectObj.rType == T_CABINET) {
        rectsCabinet.add(obj);
    } else if (rectObj.rType == T_FLOOR) {
        rectsFloor.add(obj);
    }

}

function remove(obj) {
    if (rectObj.rType == T_PDU) {
        rectsPdu.remove(obj);
    } else if (rectObj.rType == T_AC) {
        rectsAC.remove(obj);
    } else if (rectObj.rType == T_CABINET) {
        rectsCabinet.remove(obj);
    } else if (rectObj.rType == T_FLOOR) {
        rectsFloor.remove(obj);
    }
}

function update(obj) {
    if (rectObj.rType == T_PDU) {
        rectsPdu.update(obj);
    } else if (rectObj.rType == T_AC) {
        rectsAC.update(obj);
    } else if (rectObj.rType == T_CABINET) {
        rectsCabinet.update(obj);
    } else if (rectObj.rType == T_FLOOR) {
        rectsFloor.update(obj);
    }
}

/**
 * 求两点之间的距离
 * @x1 点1x坐标
 * @y1 点1y坐标
 * @x2 点2x坐标
 * @y2 点2y坐标
 */
function getTwoPointLength(x1, y1, x2, y2) {
    return Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2));
}

 

以上是关于svg中自动吸附靠近的物体的主要内容,如果未能解决你的问题,请参考以下文章

音频处理Melodyne 选择工具使用 ( 主工具简介 | 修改音高 | 自动吸附 | 音符长度修改 | 长度自动吸附 | 设置音符分离线 | 设置片段分离线 )

unity中实现物体的拖拽到指定位置的功能

ps裁剪图片的时候,如果太靠近画布边缘会自动贴边,该怎么设置让他不贴边

Blender制作多个动画片段时踩的坑

前端开发常用代码片段(中篇)

我现在不想用PS的自动吸附