0

これに関する私の目的は、html ドキュメントの任意の部分 (画像、白い背景) をトリミングし、同じトリミングされた領域をフィドルの下部にある赤い四角にスケーリングできるようにすることです。これはスニッピング ツールを作成するための最後のステップです (これは単に Web ツールを使用した実験です)。現在、最後のプッシュが必要です。既存のリポジトリを使用しないと、これを適切に解決できないようです。私はこれを行うことができましたが、結局のところ、それは試すポイントではありません. 何か助け、アイデアはありますか？fiddle ofc を自由に編集してください

HTML

<div id="selection_box"></div>
<img src="http://popcultureblog.dallasnews.com/files/2012/10/NORAH1BYNOAHABRAMS_27933966.jpeg" id="image_box">
<div id="captured_box"></div>

Javaスクリプト

function getCursorPosition(e) {
    e = e || window.event;
    if (e) {
        if (e.pageX || e.pageX == 0) return [e.pageX, e.pageY];
        var dE = document.documentElement || {};
        var dB = document.body || {};
        if ((e.clientX || e.clientX == 0) && ((dB.scrollLeft || dB.scrollLeft == 0) || (dE.clientLeft || dE.clientLeft == 0))) return [e.clientX + (dE.scrollLeft || dB.scrollLeft || 0) - (dE.clientLeft || 0), e.clientY + (dE.scrollTop || dB.scrollTop || 0) - (dE.clientTop || 0)];
    }
    return null;
}

function mousedown(e) {
    var mxy = getCursorPosition(e);
    var box = document.getElementById("selection_box");
    box.orig_x = mxy[0];
    box.orig_y = mxy[1];
    box.style.left = mxy[0] + "px";
    box.style.top = mxy[1] + "px";
    box.style.display = "block";
    document.onmousemove = mousemove;
    document.onmouseup = mouseup;
}

function mousemove(e) {
    var mxy = getCursorPosition(e);
    var box = document.getElementById("selection_box");
    box.style.width = (mxy[0] - box.orig_x) + "px";
    box.style.height = (mxy[1] - box.orig_y) + "px";
}

function mouseup(e) {
    var mxy = getCursorPosition(e),
        box = document.getElementById("selection_box"),
        image_box = document.getElementById("image_box"),
        selection = getSelection;
    box.style.display = "none";
    box.style.width = "0";
    box.style.height = "0";
    document.onmousemove = function () {};
    document.onmouseup = function () {};
}



document.onmousedown = mousedown;

CSS

* {
    -moz-user-select: none;
    -webkit-user-select: none;
}
#selection_box {
    -webkit-animation: blackwhite 3s infinite;
    display: none;
    position: absolute;
    border: 1px dashed #000000;
    background: transparent;
    width: 0;
    height: 0;
    z-index: 1;
}
@-webkit-keyframes blackwhite {
    40% {
        border-color:white;
    }
    100% {
        border-color:black;
    }
}
#image_box {
    position: absolute;
    top: 75px;
    width: 700px;
    height: 370px;
}
#captured_box {
    position: absolute;
    top: 500px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: red;
}
4

1 に答える 1

0

これにより、実現の問題が修正されるはずです（ここで、マウスはクリックポイントから左と上にも移動できます。）

    function mousemove(e) {
    var mxy = getCursorPosition(e);
    var box = document.getElementById("selection_box");
    var right=mxy[0]>box.orig_x;
    var left=!right;
    var up=mxy[1]<box.orig_y;
    var down=!up;


    if(up &&  right){
    box.style.top = mxy[1] + "px";
    }

    else if(up && left){
    box.style.left = mxy[0] + "px";
    box.style.top = mxy[1] + "px";
    }

    else if(down && left){
    box.style.left = mxy[0] + "px";
    box.style.top = mxy[1] - "px";
    }

    box.style.width = (Math.abs(mxy[0] - box.orig_x)) + "px";
    box.style.height = (Math.abs(mxy[1] - box.orig_y)) + "px";
}
于 2013-10-10T14:17:04.590 に答える