javascript - 在 javascript 中创建可调整大小/可拖动/旋转的 View-6ren

javascript - 在 javascript 中创建可调整大小/可拖动/旋转的 View

转载作者：行者123 更新时间：2023-12-03 06:49:33

我一直在尝试在 Javascript 中创建类似的东西:

如您所见，容器可以拖动、旋转和调整大小。大多数事情都可以正常工作，但是在旋转容器时调整容器大小会产生奇怪的输出。
我希望这会发生:

相反，我得到了这个:

这是完整的代码:
https://jsfiddle.net/c0krownz/
或者，

var box = document.getElementById("box");
var boxWrapper = document.getElementById("box-wrapper");

var initX, initY, mousePressX, mousePressY, initW, initH, initRotate;

function repositionElement(x, y) {
    boxWrapper.style.left = x;
    boxWrapper.style.top = y;
}

function resize(w, h) {
    box.style.width = w + 'px';
    box.style.height = h + 'px';
    boxWrapper.style.width = w;
    boxWrapper.style.height = h;
}


function getCurrentRotation(el) {
    var st = window.getComputedStyle(el, null);
    var tm = st.getPropertyValue("-webkit-transform") ||
        st.getPropertyValue("-moz-transform") ||
        st.getPropertyValue("-ms-transform") ||
        st.getPropertyValue("-o-transform") ||
        st.getPropertyValue("transform")
    "none";
    if (tm != "none") {
        var values = tm.split('(')[1].split(')')[0].split(',');
        var angle = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
        return (angle < 0 ? angle + 360 : angle);
    }
    return 0;
}

function rotateBox(deg) {
    boxWrapper.style.transform = `rotate(${deg}deg)`;
}

// drag support
boxWrapper.addEventListener('mousedown', function (event) {
    if (event.target.className.indexOf("dot") > -1) {
        return;
    }

    initX = this.offsetLeft;
    initY = this.offsetTop;
    mousePressX = event.clientX;
    mousePressY = event.clientY;


    function eventMoveHandler(event) {
        repositionElement(initX + (event.clientX - mousePressX) + 'px',
            initY + (event.clientY - mousePressY) + 'px');
    }

    boxWrapper.addEventListener('mousemove', eventMoveHandler, false);

    window.addEventListener('mouseup', function () {
        boxWrapper.removeEventListener('mousemove', eventMoveHandler, false);
    }, false);

}, false);
// done drag support

// handle resize
var rightMid = document.getElementById("right-mid");
var leftMid = document.getElementById("left-mid");
var topMid = document.getElementById("top-mid");
var bottomMid = document.getElementById("bottom-mid");

var leftTop = document.getElementById("left-top");
var rightTop = document.getElementById("right-top");
var rightBottom = document.getElementById("right-bottom");
var leftBottom = document.getElementById("left-bottom");

function resizeHandler(event, left = false, top = false, xResize = false, yResize = false) {
    initX = boxWrapper.offsetLeft;
    initY = boxWrapper.offsetTop;
    mousePressX = event.clientX;
    mousePressY = event.clientY;

    initW = box.offsetWidth;
    initH = box.offsetHeight;

    initRotate = getCurrentRotation(boxWrapper);

    function eventMoveHandler(event) {
        var wDiff = event.clientX - mousePressX;
        var hDiff = event.clientY - mousePressY;

        var newW = initW, newH = initH, newX = initX, newY = initY;

        if (xResize) {
            if (left) {
                newW = initW - wDiff;
                newX = initX + wDiff;
            } else {
                newW = initW + wDiff;
            }
        }

        if (yResize) {
            if (top) {
                newH = initH - hDiff;
                newY = initY + hDiff;
            } else {
                newH = initH + hDiff;
            }
        }

        resize(newW, newH);
        repositionElement(newX, newY);
    }

    window.addEventListener('mousemove', eventMoveHandler, false);

    window.addEventListener('mouseup', function () {
        window.removeEventListener('mousemove', eventMoveHandler, false);
    }, false);
}


rightMid.addEventListener('mousedown', e => resizeHandler(e, false, false, true, false));
leftMid.addEventListener('mousedown', e => resizeHandler(e, true, false, true, false));
topMid.addEventListener('mousedown', e => resizeHandler(e, false, true, false, true));
bottomMid.addEventListener('mousedown', e => resizeHandler(e, false, false, false, true));
leftTop.addEventListener('mousedown', e => resizeHandler(e, true, true, true, true));
rightTop.addEventListener('mousedown', e => resizeHandler(e, false, true, true, true));
rightBottom.addEventListener('mousedown', e => resizeHandler(e, false, false, true, true));
leftBottom.addEventListener('mousedown', e => resizeHandler(e, true, false, true, true));

// handle rotation
var rotate = document.getElementById("rotate");
rotate.addEventListener('mousedown', function (event) {
    // if (event.target.className.indexOf("dot") > -1) {
    //     return;
    // }

    initX = this.offsetLeft;
    initY = this.offsetTop;
    mousePressX = event.clientX;
    mousePressY = event.clientY;


    var arrow = document.querySelector("#box");
    var arrowRects = arrow.getBoundingClientRect();
    var arrowX = arrowRects.left + arrowRects.width / 2;
    var arrowY = arrowRects.top + arrowRects.height / 2;

    function eventMoveHandler(event) {
        var angle = Math.atan2(event.clientY - arrowY, event.clientX - arrowX) + Math.PI / 2;
        rotateBox(angle * 180 / Math.PI);
    }

    window.addEventListener('mousemove', eventMoveHandler, false);

    window.addEventListener('mouseup', function () {
        window.removeEventListener('mousemove', eventMoveHandler, false);
    }, false);

}, false);



resize(300, 200);
repositionElement(100, 100);

.box {
    background-color: #00BCD4;
    position: relative;
    user-select: none;
}

.box-wrapper {
    position: absolute;
    transform-origin: center center;
    user-select: none;
}

.dot {
    height: 10px;
    width: 10px;
    background-color: #1E88E5;
    position: absolute;
    border-radius: 100px;
    border: 1px solid white;
    user-select: none;
}

.dot:hover {
    background-color: #0D47A1;
}

.dot.left-top {
    top: -5px;
    left: -5px;
    /* cursor: nw-resize; */
}

.dot.left-bottom {
    bottom: -5px;
    left: -5px;
    /* cursor: sw-resize; */
}

.dot.right-top {
    top: -5px;
    right: -5px;
    /* cursor: ne-resize; */
}

.dot.right-bottom {
    bottom: -5px;
    right: -5px;
    /* cursor: se-resize; */
}

.dot.top-mid {
    top: -5px;
    left: calc(50% - 5px);
    /* cursor: n-resize; */
}

.dot.left-mid {
    left: -5px;
    top: calc(50% - 5px);
    /* cursor: w-resize; */
}

.dot.right-mid {
    right: -5px;
    top: calc(50% - 5px);
    /* cursor: e-resize; */
}

.dot.bottom-mid {
    bottom: -5px;
    left: calc(50% - 5px);
    /* cursor: s-resize; */
}

.dot.rotate {
    top: -30px;
    left: calc(50% - 5px);
    cursor: url('https://findicons.com/files/icons/1620/crystal_project/16/rotate_ccw.png'), auto;
}

.rotate-link {
    position: absolute;
    width: 1px;
    height: 15px;
    background-color: #1E88E5;
    top: -20px;
    left: calc(50% + 0.5px);
    z-index: -1;
}

<div class="box-wrapper" id="box-wrapper">
    <div class="box" id="box">
        <div class="dot rotate" id="rotate"></div>
        <div class="dot left-top" id="left-top"></div>
        <div class="dot left-bottom" id="left-bottom"></div>
        <div class="dot top-mid" id="top-mid"></div>
        <div class="dot bottom-mid" id="bottom-mid"></div>
        <div class="dot left-mid" id="left-mid"></div>
        <div class="dot right-mid" id="right-mid"></div>
        <div class="dot right-bottom" id="right-bottom"></div>
        <div class="dot right-top" id="right-top"></div>
        <div class="rotate-link"></div>
    </div>
</div>

最佳答案

用单位分配 CSS
当您设置 element.style.top和 element.style.left ，您需要指定单位(通常是像素，px，在进行这种类型的元素转换时)。在您的情况下，您只需在 eventMoveHandler 中设置单位，这使得它只能在移动处理程序中工作。
在下面的代码片段中，我将其更改为自动添加 px至repositionElement ，并从 eventMoveHandler 中删除单位.我还删除了 boxWrapper.style.width = w;和 boxWrapper.style.height = h;在 resize ，因为他们没有单位，而且不清楚boxWrapper 在哪里使用了尺寸。
重新分配坐标
对我来说，从盒子的中心来考虑这个问题更容易。您的原始代码使用预旋转的左上角来跟踪位置，这在旋转的矩形上变得难以想象。另一方面，中心始终是中心。为了使用中心，我添加/更改了这个 css:

.box {
    transform: translate(-50%, -50%);
}
.box-wrapper {
    transform-origin: top left; /* changed from `center center` */
}

它还稍微简化了 resizeHandler 中的代码。/ eventMoveHandler :

if (xResize) {
    if (left) {
        newW = initW - wDiff;
    } else {
        newW = initW + wDiff;
    }
    newX += 0.5 * wDiff;
}
if (yResize) {
    if (top) {
        newH = initH - hDiff;
    } else {
        newH = initH + hDiff;
    }
    newY += 0.5 * hDiff;
}

现在 box-wrapper的 style.top和 style.left坐标实际上是 box 的中心.如果这个坐标系不起作用，我们可以重新访问它。
调整大小时考虑旋转
从这里开始，我们需要在调整盒子大小时考虑盒子的旋转。例如，当盒子旋转 90 度时，所有的 x 变化都变成了 y 变化。要转换它们，您可以使用 Math.cos和 Math.sin

var initRadians = initRotate * Math.PI / 180;
var cosFraction = Math.cos(initRadians);
var sinFraction = Math.sin(initRadians);
//...
var wDiff = (event.clientX - mousePressX);
var hDiff = (event.clientY - mousePressY);
var rotatedWDiff = cosFraction * wDiff + sinFraction * hDiff;
var rotatedHDiff = cosFraction * hDiff - sinFraction * wDiff;
//...
if (xResize) {
    if (left) {
        newW = initW - rotatedWDiff;
    } else {
        newW = initW + rotatedWDiff;
    }
    //...
}
if (yResize) {
    if (top) {
        newH = initH - rotatedHDiff;
    } else {
        newH = initH + rotatedHDiff;
    }
    //...
}

此外，当你更正你的位置时，你也应该使用 sin 和 cos 分数，因为 style.top 设置的位置和 style.left通常不考虑轮换:

if (xResize) {
   //...
   newX += 0.5 * rotatedWDiff * cosFraction;
   newY += 0.5 * rotatedWDiff * sinFraction;
}
if (yResize) {
   //...
   newX -= 0.5 * rotatedHDiff * sinFraction;
   newY += 0.5 * rotatedHDiff * cosFraction;
}

应用最小宽度和高度
正如评论中所指出的，当拖动的边缘或 Angular 落超出锚定边缘时，行为很奇怪。在这种情况下，您可能希望盒子被翻转，或者盒子停止调整大小。我将在这里使用最小宽度和高度，因为实现似乎更简单。

const minWidth = 40;
const minHeight = 40;
//...
if (xResize) {
    if (left) {
        newW = initW - rotatedWDiff;
        if (newW < minWidth) {
          newW = minWidth;
          rotatedWDiff = initW - minWidth;
        }
    } else {
        newW = initW + rotatedWDiff;
        if (newW < minWidth) {
          newW = minWidth;
          rotatedWDiff = minWidth - initW;
        }
    }
    //..
}
if (yResize) {
    if (top) {
        newH = initH - rotatedHDiff;
        if (newH < minHeight) {
          newH = minHeight;
          rotatedHDiff = initH - minHeight;
        }
    } else {
        newH = initH + rotatedHDiff;
        if (newH < minHeight) {
          newH = minHeight;
          rotatedHDiff = minHeight - initH;
        }
    }
    //...
}

旁白:删除事件监听器
与问题的核心无关的是删除事件监听器。具有讽刺意味的是，删除事件监听器的代码在 mouseup 中留下了一个事件监听器。 :

window.addEventListener('mouseup', function() {
    window.removeEventListener('mousemove', eventMoveHandler, false);
}, false);

这不是什么大问题，因为如果重复运行该函数并不会做太多事情，而且闭包并不会真正占用那么多内存。但要真正清理它，我们可以将其更改为:

window.addEventListener('mouseup', function eventEndHandler() {
    window.removeEventListener('mousemove', eventMoveHandler, false);
    window.removeEventListener('mouseup', eventEndHandler, false);
}, false);

结果
总之，它看起来像:

var box = document.getElementById("box");
var boxWrapper = document.getElementById("box-wrapper");
const minWidth = 40;
const minHeight = 40;


var initX, initY, mousePressX, mousePressY, initW, initH, initRotate;

function repositionElement(x, y) {
    boxWrapper.style.left = x + 'px';
    boxWrapper.style.top = y + 'px';
}

function resize(w, h) {
    box.style.width = w + 'px';
    box.style.height = h + 'px';
}


function getCurrentRotation(el) {
    var st = window.getComputedStyle(el, null);
    var tm = st.getPropertyValue("-webkit-transform") ||
        st.getPropertyValue("-moz-transform") ||
        st.getPropertyValue("-ms-transform") ||
        st.getPropertyValue("-o-transform") ||
        st.getPropertyValue("transform")
    "none";
    if (tm != "none") {
        var values = tm.split('(')[1].split(')')[0].split(',');
        var angle = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
        return (angle < 0 ? angle + 360 : angle);
    }
    return 0;
}

function rotateBox(deg) {
    boxWrapper.style.transform = `rotate(${deg}deg)`;
}

// drag support
boxWrapper.addEventListener('mousedown', function (event) {
    if (event.target.className.indexOf("dot") > -1) {
        return;
    }

    initX = this.offsetLeft;
    initY = this.offsetTop;
    mousePressX = event.clientX;
    mousePressY = event.clientY;


    function eventMoveHandler(event) {
        repositionElement(initX + (event.clientX - mousePressX),
            initY + (event.clientY - mousePressY));
    }

    boxWrapper.addEventListener('mousemove', eventMoveHandler, false);
    window.addEventListener('mouseup', function eventEndHandler() {
        boxWrapper.removeEventListener('mousemove', eventMoveHandler, false);
        window.removeEventListener('mouseup', eventEndHandler);
    }, false);

}, false);
// done drag support

// handle resize
var rightMid = document.getElementById("right-mid");
var leftMid = document.getElementById("left-mid");
var topMid = document.getElementById("top-mid");
var bottomMid = document.getElementById("bottom-mid");

var leftTop = document.getElementById("left-top");
var rightTop = document.getElementById("right-top");
var rightBottom = document.getElementById("right-bottom");
var leftBottom = document.getElementById("left-bottom");

function resizeHandler(event, left = false, top = false, xResize = false, yResize = false) {
    initX = boxWrapper.offsetLeft;
    initY = boxWrapper.offsetTop;
    mousePressX = event.clientX;
    mousePressY = event.clientY;

    initW = box.offsetWidth;
    initH = box.offsetHeight;

    initRotate = getCurrentRotation(boxWrapper);
    var initRadians = initRotate * Math.PI / 180;
    var cosFraction = Math.cos(initRadians);
    var sinFraction = Math.sin(initRadians);
    function eventMoveHandler(event) {
        var wDiff = (event.clientX - mousePressX);
        var hDiff = (event.clientY - mousePressY);
        var rotatedWDiff = cosFraction * wDiff + sinFraction * hDiff;
        var rotatedHDiff = cosFraction * hDiff - sinFraction * wDiff;

        var newW = initW, newH = initH, newX = initX, newY = initY;

        if (xResize) {
            if (left) {
                newW = initW - rotatedWDiff;
                if (newW < minWidth) {
                  newW = minWidth;
                  rotatedWDiff = initW - minWidth;
                }
            } else {
                newW = initW + rotatedWDiff;
                if (newW < minWidth) {
                  newW = minWidth;
                  rotatedWDiff = minWidth - initW;
                }
            }
            newX += 0.5 * rotatedWDiff * cosFraction;
            newY += 0.5 * rotatedWDiff * sinFraction;
        }

        if (yResize) {
            if (top) {
                newH = initH - rotatedHDiff;
                if (newH < minHeight) {
                  newH = minHeight;
                  rotatedHDiff = initH - minHeight;
                }
            } else {
                newH = initH + rotatedHDiff;
                if (newH < minHeight) {
                  newH = minHeight;
                  rotatedHDiff = minHeight - initH;
                }
            }
            newX -= 0.5 * rotatedHDiff * sinFraction;
            newY += 0.5 * rotatedHDiff * cosFraction;
        }

        resize(newW, newH);
        repositionElement(newX, newY);
    }


    window.addEventListener('mousemove', eventMoveHandler, false);
    window.addEventListener('mouseup', function eventEndHandler() {
        window.removeEventListener('mousemove', eventMoveHandler, false);
        window.removeEventListener('mouseup', eventEndHandler);
    }, false);
}


rightMid.addEventListener('mousedown', e => resizeHandler(e, false, false, true, false));
leftMid.addEventListener('mousedown', e => resizeHandler(e, true, false, true, false));
topMid.addEventListener('mousedown', e => resizeHandler(e, false, true, false, true));
bottomMid.addEventListener('mousedown', e => resizeHandler(e, false, false, false, true));
leftTop.addEventListener('mousedown', e => resizeHandler(e, true, true, true, true));
rightTop.addEventListener('mousedown', e => resizeHandler(e, false, true, true, true));
rightBottom.addEventListener('mousedown', e => resizeHandler(e, false, false, true, true));
leftBottom.addEventListener('mousedown', e => resizeHandler(e, true, false, true, true));

// handle rotation
var rotate = document.getElementById("rotate");
rotate.addEventListener('mousedown', function (event) {
    // if (event.target.className.indexOf("dot") > -1) {
    //     return;
    // }

    initX = this.offsetLeft;
    initY = this.offsetTop;
    mousePressX = event.clientX;
    mousePressY = event.clientY;


    var arrow = document.querySelector("#box");
    var arrowRects = arrow.getBoundingClientRect();
    var arrowX = arrowRects.left + arrowRects.width / 2;
    var arrowY = arrowRects.top + arrowRects.height / 2;

    function eventMoveHandler(event) {
        var angle = Math.atan2(event.clientY - arrowY, event.clientX - arrowX) + Math.PI / 2;
        rotateBox(angle * 180 / Math.PI);
    }

    window.addEventListener('mousemove', eventMoveHandler, false);

    window.addEventListener('mouseup', function eventEndHandler() {
        window.removeEventListener('mousemove', eventMoveHandler, false);
        window.removeEventListener('mouseup', eventEndHandler);
    }, false);
}, false);

resize(300, 200);
repositionElement(200, 200);

.box {
    background-color: #00BCD4;
    position: relative;
    user-select: none;
    transform: translate(-50%, -50%);
}

.box-wrapper {
    position: absolute;
    transform-origin: top left;
    user-select: none;
}

.dot {
    height: 10px;
    width: 10px;
    background-color: #1E88E5;
    position: absolute;
    border-radius: 100px;
    border: 1px solid white;
    user-select: none;
}

.dot:hover {
    background-color: #0D47A1;
}

.dot.left-top {
    top: -5px;
    left: -5px;
    /* cursor: nw-resize; */
}

.dot.left-bottom {
    bottom: -5px;
    left: -5px;
    /* cursor: sw-resize; */
}

.dot.right-top {
    top: -5px;
    right: -5px;
    /* cursor: ne-resize; */
}

.dot.right-bottom {
    bottom: -5px;
    right: -5px;
    /* cursor: se-resize; */
}

.dot.top-mid {
    top: -5px;
    left: calc(50% - 5px);
    /* cursor: n-resize; */
}

.dot.left-mid {
    left: -5px;
    top: calc(50% - 5px);
    /* cursor: w-resize; */
}

.dot.right-mid {
    right: -5px;
    top: calc(50% - 5px);
    /* cursor: e-resize; */
}

.dot.bottom-mid {
    bottom: -5px;
    left: calc(50% - 5px);
    /* cursor: s-resize; */
}

.dot.rotate {
    top: -30px;
    left: calc(50% - 5px);
    cursor: url('https://findicons.com/files/icons/1620/crystal_project/16/rotate_ccw.png'), auto;
}

.rotate-link {
    position: absolute;
    width: 1px;
    height: 15px;
    background-color: #1E88E5;
    top: -20px;
    left: calc(50% + 0.5px);
    z-index: -1;
}

<div class="box-wrapper" id="box-wrapper">
    <div class="box" id="box">
        <div class="dot rotate" id="rotate"></div>
        <div class="dot left-top" id="left-top"></div>
        <div class="dot left-bottom" id="left-bottom"></div>
        <div class="dot top-mid" id="top-mid"></div>
        <div class="dot bottom-mid" id="bottom-mid"></div>
        <div class="dot left-mid" id="left-mid"></div>
        <div class="dot right-mid" id="right-mid"></div>
        <div class="dot right-bottom" id="right-bottom"></div>
        <div class="dot right-top" id="right-top"></div>
        <div class="rotate-link"></div>
    </div>
</div>

关于javascript - 在 javascript 中创建可调整大小/可拖动/旋转的 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64690514/

文章推荐： javascript - 通过Javascript随机改变背景音乐

文章推荐： pinterest - 获取带有特殊字符的板的 Pinterest RSS feed

文章推荐： javascript - 使用 JQuery 在图标类之间切换

文章推荐： Confluence 蓝图替换在具有纯文本正文的宏中不起作用

拖动 gridstack 卡时滚动内容
我正在使用 gridstack 来显示我的小部件。拖动和调整大小适用于 gridstack 卡，但当我将卡拖到底部时，卡的容器不会滚动。我想在拖动卡片时滚动那个容器。该容器只是一个 div 元素，所有
Flutter:使用手势检测器禁用多点触控/拖动
我目前正在构建一个多个处理的 slider 小部件，并且目前正在实现手势检测器。我有一个问题，如果您用第二根手指触摸/拖动屏幕，检测器会识别它并调用 onDragUpdate 函数，这是我试图禁用的功
AngularJS ng 拖动
我是 AngularJS 的新手，我对当前的项目有点压力，这就是我在这里问的原因。我看到 AngularJS 有 ng-dragstart 事件( http://docs.ng.dart.ant.c
JavaScript 图像缩放和平移(拖动)
关于缩放大图像和平移有什么建议吗？最好内联在页面上。我一直在使用PanoJS(又名GSV2)，但是现在越来越多的人使用iPhone/iPad/Android类型的设备，这个库要么太慢，要么旧版本不支
java - 拖动 JPanel
我在尝试拖动 JPanel 时遇到问题。如果我纯粹在 MouseDragged 中将其实现为: public void mouseDragged(MouseEvent me) { me.getS
android - 拖动/移动后将按钮移回原点
我有一个需要与屏幕底部对齐的 ImageButton，当我单击并拖动它时，它会随着我的手指移动一定距离，超过该距离它不会远离原点，而是继续跟随我的手指从原点开始的方向。当我松手时，按钮必须滑回原点。
android - 拖动 TextView
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
android - 拖动，缩放没有矩阵android的imageview
我需要一个解决方案来实现拖动和缩放，在不使用矩阵的情况下围绕屏幕 onTouch 事件路由 ImageView。我搜索了很多但所有答案都是用矩阵完成的，因为我在屏幕矩阵中有多个对象不适合我，我想拖动和
ios - 拖动 UIView
我需要一些帮助来拖动 UIView 以显示主视图下方的菜单 View 。我有两个 UIView。menuView - 包括菜单按钮和标签和 mainView - 位于 menuView 之上。我
javascript - 谷歌地图即使在实现后也不可拖动/拖动
谷歌地图即使设为 true 也不可拖动/拖动。重现步骤:在新选项卡中加载带有 map 的页面，检查并在不执行任何操作的情况下转到移动 View 。现在在移动 View 中左右上下拖动 map ，它将
Android在ImageView上缩放、拖动、绘制
我在绘制和缩放 ImageView 时遇到问题。请帮帮我.. 当我画一些东西然后拖动或缩放图像时 - 绘图保留在原处，如您在屏幕截图中所见。而且我只需要简单地在图片上绘图，并且可以缩放和拖动这张图片。
c# - 尝试模拟鼠标点击/拖动
所以我试图模拟鼠标左键单击和鼠标左键释放来执行一些自动拖放操作。它目前在 C# Winforms(是的，winforms :|)中并且有点笨拙。基本上，一旦发送了点击，我希望它根据 Kinect
html5 - 拖动 Canvas
我有一个巨大的 HTML5 Canvas，我希望它像谷歌地图一样工作:用户可以拖动它并始终只看到它的一小部分(屏幕大小)。它只呈现您在屏幕上可以看到的部分。我该怎么做？你有想法吗？最佳答案 2 个简
javascript - 如何为触摸和鼠标(拖动)事件制作可拖动元素
我有以下拖放应用程序代码，它在桌面上按预期工作，但是当我想在移动设备上使用该应用程序时，拖动事件无法按预期工作。我知道触摸事件是必需的，但我不确定如何设置它们和实现这些功能。 .object
reactjs - 禁用或启用 map 拖动
我正在使用 react-leaflet map ，我用状态改变了很多 map 属性，但是当使用状态来改变拖动属性时它不起作用。 { this.map = map}}
geometry - 拖动/移动多个选定功能-OpenLayers
我知道我可以轻松地允许用户在OpenLayers中选择多个功能/几何图形，但是随后我希望使用户能够轻松地同时拖动/移动所有选定的功能。使用ModifyFeature控件一次只能移动一个要素...是否
拖动 map 时MapControl Xaml元素滞后
我有一个 Windows Phone 运行时应用程序，我使用 xaml 在 map 上显示图钉。当我拖动 map 时，控件试图保持在相同位置时会出现一些滞后。任何帮助，将不胜感
jquery - 滚动可拖动项目的内容时禁用 jQuery 拖动
我通常不会提出此类问题/答案，但我想我会这样做，因为我已经看到这个问题被问了 20 多次，但没有一个答案真正有效。简而言之，问题是，如果您在可拖动 jQuery 项目内的任何位置有可滚动内容(over
uicollectionview - 拖动 UICollectionViewCell 时如何实现透明背景或圆角
我确信一定有一种简单的方法可以做到这一点，但到目前为止，我已经花了很长时间在各种兔子洞中没有成功。我有一个支持拖放的 Collection View 。被拖动的单元格有 UIImageView在 c
delphi - 虚拟 TreeView 拖动
如何在两个virtualtreeview之间复制以复制所有列，而不仅仅是第一列？复制前：复制后：最佳答案树控件不保存任何数据。它不包含要显示的列数据，因此无法复制它。而是，当树控件想要显示任何

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 javascript 中创建可调整大小/可拖动/旋转的 View