将多个可拖动和可调整大小的图像添加到画布

我正在开发一个在线购物网站项目。为此，我需要将多个图像像皮带，帽子，衬衫或裤子添加到画布上。最后，画布应作为图像导入。将多个可拖动和可调整大小的图像添加到画布

有人建议我该怎么做，并帮助我在画布上添加多个可拖动和可调整大小的图像。请帮我出去

这就是我想要做的。

<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

将多个可拖动和可调整大小的图像添加到画布

回答

相关问题