画像の上に矩形を描くためのjavascript

-1

私はJavaスクリプトを使ってPHP上でプロジェクトを行っていました。私はjavascriptを使用して画像の上に長方形を描画しようとしていました。長方形は画像と比較して、サイズも私を助けrectangle.Pleaseいずれかを描くの共同の座標を表示するには...私はあなたが内部の絶対位置の要素をできるように、ラッパーを必要とする.....画像の上に矩形を描くためのjavascript

<STYLE> 
    #rubberBand { 
    position: absolute; 
    visibility: hidden; 
    width: 0px; height: 0px; 
    border: 2px solid red; 
} 
</STYLE> 

</HEAD> 
<BODY> 
<img name="myImage" id="myImage" src="a.jpg"> 


<DIV ID="rubberBand"></DIV> 

<SCRIPT> 

var IMG; 

    function startRubber (evt) { 
    if (document.all) { 

     var r = document.all.rubberBand; 
     r.style.width = 0; 
     r.style.height = 0; 
     r.style.pixelLeft = event.x; 
     r.style.pixelTop = event.y; 
     r.style.visibility = 'visible'; 
     IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image 
    } 
    else if (document.getElementById) { 
    // firefox 
    evt.preventDefault(); 
    var r = document.getElementById('rubberBand'); 
    r.style.width = 0; 
    r.style.height = 0; 
    r.style.left = evt.clientX + 'px'; 
    r.style.top = evt.clientY + 'px'; 
    r.style.visibility = 'visible'; 
    r.onmouseup = stopRubber; 
    } 
    IMG.onmousemove = moveRubber; 
    } 
    function moveRubber (evt) { 
    if (document.all) { // IE 
    var r = document.all.rubberBand; 
    r.style.width = event.x - r.style.pixelLeft; 
    r.style.height = event.y - r.style.pixelTop; 
    } 
    else if (document.getElementById) { // firefox 
    var r = document.getElementById('rubberBand'); 
    r.style.width = evt.clientX - parseInt(r.style.left); 
    r.style.height = evt.clientY - parseInt(r.style.top); 
    } 
    return false; // otherwise IE won't fire mouseup :/ 
    } 
    function stopRubber (evt) { 
    IMG.onmousemove = null; 
    } 

    function cancelDragDrop() 
    { 
    window.event.returnValue = false; 
    } 

    IMG = document.getElementById('myImage'); 
    IMG.onmousedown = startRubber; 
    IMG.onmouseup = stopRubber; 

</SCRIPT>

出典

2012-02-22 Vineeth

を試してみましたか？サイズ変更の画像ですか？キャンバス？フラッシュ？ –

あなたが試みたことを示してください。私たちはそれを解決しようとします。しかし、私たちはコードを書くつもりはありません。 –

これらのさまざまな方法は何ですか？どのようにイメージをロードしていますか？このクライアント側のJavaScriptですか？完全なブラウザ間の互換性が必要ですか？ – Ryan

をさまざまな方法を試してみました。サイズは、写真やボックスの必要な場所によって異なります。

HTML：

<div class="wrapper"> 
    <img src="...." /> 
    <div class="box"></div> 
</div>

はCSS：あなたはどのような方法を

.wrapper { 
    position:relative; 
} 

.box { 
    position:absolute; 
    top:10px; 
    left:10px; 
    width:50px; 
    height:50px; 
    border:2px solid #ffffff; 
    background-color:transparent 
}

出典

2012-02-22 14:56:48

画像の上に矩形を描くためのjavascript

答えて

関連する問題