將多個可拖動和可調整大小的圖像添加到畫布

我正在開發一個在線購物網站項目。爲此，我需要將多個圖像像皮帶，帽子，襯衫或褲子添加到畫布上。最後，畫布應作爲圖像導入。將多個可拖動和可調整大小的圖像添加到畫布

有人建議我該怎麼做，並幫助我在畫布上添加多個可拖動和可調整大小的圖像。請幫我出去

這就是我想要做的。

<html lang="en"> 
<head> 
    <title>Outfit Demo</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/> 
<script type="text/javascript"> 
jQuery(document).ready(function(event){ 
$("#shirt").resizable().draggable(); 
    $('.pic1').live('mouseover',function(){ 
    $(this).resizable().draggable(); 
}); 
}); 
    var shirt; 
    var pant; 
    function selectshirt(src) 
    { 
    shirt = src; 
    path = "<img class=\"pic1\" src=\""+src+"\" height=\"300px\" width=\"300px\"/>"; 
    invisible("shirtcontainer"); 
    visible("pantcontainer"); 

    document.getElementById("shirt").innerHTML=document.getElementById("shirt").value+path; 
    document.getElementById("cart").style.visibility="visible"; 
    } 
    function selectpants(src) 
    { 
    pant = src; 
    path = "<img class=\"pic1\" src=\""+src+"\" height=\"400px\" width=\"300px\"/>"; 
    document.getElementById("trousers").innerHTML=path; 
    } 
    function addtocart() 
    { 
    alert("Shirt:"+shirt+"\npant:"+pant); 
    } 
    function changeshirt() 
    { 
    visible("shirtcontainer"); 
    invisible("pantcontainer"); 
    } 
    function changepant() 
    { 
    visible("shirtcontainer"); 
    invisible("pantcontainer"); 
    } 
    function visible(containername) 
    { 
    document.getElementById(containername).style.visibility="visible"; 
    } 
    function invisible(containername) 
    { 
    document.getElementById(containername).style.visibility="hidden"; 
    } 
    </script> 
</head> 

<body> 
<div id="leftpanel" style="position:absolute;left:0;width:33%;"> 
<div style="left:0;height:30%;" id="shirt"></div> 
<div style="left:0;height:70%;" id="trousers"></div> 
<div style="left:0;height:70%;" id="cart"> 
<button onclick="changeshirt()">Change Shirt</button> 
<button onclick="addtocart()">Add to cart</button> 
</div> 
</div> 
<div id="middlepanel" style="width: 100%; height: 100%; position:absolute;left:500;width:33%;overflow:auto;"> 
<div id="shirtcontainer"> 
<img src="images/shirts/shirt1.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
<img src="images/shirts/shirt.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
<img src="images/shirts/shirt2.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
<img src="images/shirts/shirt3.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
<img src="images/shirts/shirt4.png" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
<img src="images/shirts/shirt5.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
<img src="images/shirts/shirt6.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
<img src="images/shirts/shirt7.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
</div> 
</div> 
<div id="rightpanel" style="width: 100%; height: 100%; position:absolute;right:0;width:33%;overflow:auto;"> 
<div id="pantcontainer"> 
<img src="images/pants/pant1.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
<img src="images/pants/pant.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
<img src="images/pants/pant2.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
<img src="images/pants/pant3.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
<img src="images/pants/pant4.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
<img src="images/pants/pant5.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
<img src="images/pants/pant6.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
<img src="images/pants/pant7.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
</div> 
</div> 


</body> 
<script> 
invisible("pantcontainer"); 
invisible("cart"); 
</script> 
</html>

來源

2013-02-25 Mahesh Vemuri

http://whathaveyoutried.com？ – Archer 2013-02-25 13:33:15

這是一個非常複雜的事情要做在帆布上，因爲你將不得不處理所有的鼠標挑選，事件捕獲，重繪等..在你自己的。我建議你看看一個可以爲你處理它的畫布庫。 – Damp 2013-02-25 13:40:57

這裏是我的代碼：

我有10件襯衫和褲子10做，現在我要讓它動。但對於那些需要代碼的人可以參考這一點。它可能會幫助你。

<html lang="en"> 

<head> 
    <title>Outfit Demo</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
<script type="text/javascript"> 
$(document).ready(function() { 
    // sets draggable the elements with id="shirt" 
    $('#shirt').draggable({ 
    cursor: 'move',  // sets the cursor apperance 
    containment: '#leftpanel' // sets to can be dragged only within its parent 
    }); 
    // sets draggable the paragraph inside #trousers 
    $('#trousers').draggable({ 
    cursor: 'move', 
    containment: '#leftpanel'  // sets to can be dragged only within its parent 
    }); 

    $('#btn').click(function() { 
    // removes all LI with class="cls" in OL 
    $('#shirt').resizable({ 
    cursor: 'move', 
    containment: '#leftpanel'  // sets to can be dragged only within its parent 
    }); 
    $('#trousers').resizable({ 
    cursor: 'move', 
    containment: '#leftpanel'  // sets to can be dragged only within its parent 
    }); 
    }); 
}); 

    var shirt; 
    var pant; 
    function selectshirt(src) 
    { 
    shirt = src; 
    path = "<img src=\""+src+"\" height=\"100%\" width=\"100%\"/>"; 
    invisible("middlepanel"); 
    visible("rightpanel"); 

    document.getElementById("shirt").innerHTML=path; 
    document.getElementById("cart").style.visibility="visible"; 
    } 
    function selectpants(src) 
    { 
    pant = src; 
    path = "<img class=\"pic1\" src=\""+src+"\" height=\"100%\" width=\"100%\"/>"; 
    document.getElementById("trousers").innerHTML=path; 
    } 
    function addtocart() 
    { 
    alert("Shirt:"+shirt+"\npant:"+pant); 
    } 
    function changeshirt() 
    { 
    visible("middlepanel"); 
    invisible("rightpanel"); 
    } 
    function changepant() 
    { 
    visible("shirtcontainer");  
    invisible("pantcontainer"); 
    } 
    function visible(containername) 
    { 
    document.getElementById(containername).style.visibility="visible"; 
    } 
    function invisible(containername) 
    { 
    document.getElementById(containername).style.visibility="hidden"; 
    } 
    </script> 
</head> 

<body> 
<div id="leftpanel" style="width:800px;height:600px;border:1px solid black;"> 
    <div id="shirt" style="left:0;height:300px;width:300px;"></div> 
    <div id="trousers" style="left:0;height:300px;width:300px;" ></div> 
</div> 
<div style="left:0;height:70%;" id="cart"> 
    <button onclick="changeshirt()">Change Shirt</button> 
    <button onclick="addtocart()">Add to cart</button> 
    <button id="btn">Resize</button> 
</div> 
<div id="middlepanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;"> 
    <div id="shirtcontainer"> 
     <img src="images/shirts/shirt1.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
     <img src="images/shirts/shirt.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
     <img src="images/shirts/shirt2.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
     <img src="images/shirts/shirt3.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
     <img src="images/shirts/shirt4.png" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
     <img src="images/shirts/shirt5.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
     <img src="images/shirts/shirt6.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
     <img src="images/shirts/shirt7.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/> 
    </div> 
</div> 
<div id="rightpanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;"> 
    <div id="pantcontainer"> 
     <img src="images/pants/pant1.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
     <img src="images/pants/pant.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
     <img src="images/pants/pant2.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
     <img src="images/pants/pant3.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
     <img src="images/pants/pant4.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
     <img src="images/pants/pant5.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
     <img src="images/pants/pant6.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
     <img src="images/pants/pant7.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/> 
    </div> 
</div> 


</body> 
<script> 
invisible("rightpanel"); 
invisible("cart"); 
</script> 
</html>

來源

2013-02-27 02:53:04

將多個可拖動和可調整大小的圖像添加到畫布

回答

相關問題