Question

我有一个名为meniucolaj的div，我存储了一些图像，我想将它们中的一些拖放到div conturcanvas中绘制的每个画布中以制作照片拼贴。为了测试代码，我只将第一张照片拖放到第一张画布作为放置位置。我调整了要包含在画廊中的图像的大小，但是当我将它们放入画布时，我希望它们以更大的尺寸显示在画布中，但我想选择要在画布中显示的图片的哪个部分。你知道，因为你有机会在制作拼贴时选择，但是在拖入画布时图片没有显示。你能救我吗？

提前谢谢！我是初学者。

HTML：

<!DOCTYPE html>
<html> 
<head> 
    <title>Photo Editor</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400"> 

    <link rel="stylesheet" type="text/css" href="testcollage2css.css">


</head>

<body> <!--continutul care va fi afisat pentru utilizatori-->

    <!--atasare fisier video pentru background-->   
    <video autoplay muted loop id="bkgvideo">
        <source src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\bkgcity.mp4" type="video/mp4">
    </video>



    <div class="header">
      <nav class="navigation">
        <div class="totalnavigheader">

            <div class="navheader">
                <img id="logo" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\logocollage.png" alt="Logo cannot be displayed">
            </div>

            <div class="title">
                <a id="name" href="#">Photo Collage</a>
            </div>
        </div>
      </nav>
    </div>

<div class="clasameniuri" id="meniuri">
    <div class="meniucolaj" id="meniupoze">
        <h4 id="titluimagini">Imagini</h4>
        <ul class="listaimg" id="tabelimg">
            <li class="elemimagini"><img class="imagini" id="dragelem" draggable="true" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\dog1.jpg"></li>
            <li class="elemimagini"><img class="imagini" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\cat1.jpg"></li>
        </ul>

    </div>


</div>
    <div class="containercolaj">
        <div id="conturcanvas">
             <canvas id="first"></canvas>
             <canvas id="second"></canvas>
             <canvas id="third"></canvas>
             <script>
                var canvas1 = document.getElementById("first");
                var context1 = canvas1.getContext("2d");
                <!--context.rect(1,0,296,100);
            <!--context.stroke();-->
                var canvas2 = document.getElementById("second");
                var context2 = canvas1.getContext("2d");
                var canvas3 = document.getElementById("third");
                var context3 = canvas1.getContext("2d");
            </script>
        </div>
    </div>

<script type="text/javascript" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\testcollage2js.js"></script>

</body>

</html>

CSS：

/*stilizare background*/
body {  
    background: #1A2D4B;
    position: relative;
    color: black;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 400;
    overflow-x: hidden;
}

/*stilizare fisier video ca si background*/
#bkgvideo {
    position: fixed;
    right: 0;
    bottom: 0;
    left:0;
    top:0;
    min-width: 100%; 
    min-height: 100%;
}


.header {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1002;
    background-color: rgba(42, 59, 85, 0.6);
    height: 80px;
    box-shadow: 5px 10px 18px #888888;
    border-radius: 10px;

}

.totalnavigheader > * {
    display:inline-block;

}

 #logo {
  height: auto;
  width: 60px;
  vertical-align: middle;
  margin-left:30px;

}

.title {
    padding-left:10px;
    padding-bottom:40px;
    margin-left:10px;
}

#name {
    text-decoration:none;
    color:white;
}

.clasameniuri {
    position:relative;
    background-color: rgba(253, 242, 233, 0.8);
    float:left;
    width: 382px;
    margin-top:8px;
    margin-right:6px;
    margin-left:5px;
    height:560px;
    box-shadow: 5px 10px 18px #888888;
    border-radius: 10px;
}


#titluimagini {
    color:rgb(56, 110, 147);
    text-align:center;
}

.listaimg{
    list-style-type:none;
}

.elemimagini{
    margin:1px;
    display:inline;

}

.imagini{
    width:100px;
    height:100px;
    border:2px solid #000;

}

.containercolaj {
    position:relative;
    background-color:rgba(93, 109, 126,0.8);
    float:right;
    margin-top:8px;
    margin-right:10px;
    width:920px;
    height:560px;
    box-shadow:5px 10px 18px #888888;
    border-radius: 10px;
} 


#conturcanvas
{
    width:490px;
    height:490px; 
    border:2px solid #d3d3d3;
    margin-top:20px;
    margin-left:215px;
    padding:20px;
    background-color:gray;
}

#first{
    border:1px solid #d3d3d3;
    width:232px;
    height:485px;
    float:left;
}

#second{
    border:1px solid #d3d3d3;
    width:232px;
    height:235px;
    float:right;
    margin-bottom:13px;
}

#third{
    border:1px solid #d3d3d3;
    width:232px;
    height:235px;
    float:right;
}

#first > .imagini{
    width:100%;
    height:100%;
}

JS：

var dragItem = document.getElementById("dragelem");
var dropCanvas = document.getElementById("first");

dragItem.ondragstart = function(evt) { //aceasta functie se apeleaza cand userul incearca sa mute elementul prin drag
    //evt.dataTransfer.setData('key', 'dragelem');
    evt.dataTransfer.setData('key', evt.target.id);
    console.log("its dragging...");
}

dropCanvas.ondragover = function(evt) { //aceasta functie se apeleaza cand un element este adus catre o locatie valida de drop
    evt.preventDefault();
    console.log("its dragover..");
}

dropCanvas.ondrop = function(evt){ //aceasta functie se apeleaza cand se lasa prin drop in locatia valida elementul adus prin drag
        var dropItem = evt.dataTransfer.getData('key');
        evt.preventDefault();
        console.log("its dropped..");
        console.log(dropItem);
        var myElement=document.getElementById(dropItem);
        console.log(myElement);
        var myNewElem = document.createElement('img'); // create a new image element
        myNewElem.src = myElement.src;
        dropCanvas.appendChild(myNewElem);

}

我认为dataTransfer不工作..

Answer 1

这不是在画布上绘制图像的正确方法。

您需要获取CanvasRenderingContext2D：

context = dropCanvas.getContext("2d");

然后通过调用

绘制图像

context.drawImage(myNewElem, x, y, more, arguments, here);

你可以在这里阅读drawImage可以采取的所有论点：
https://www.w3schools.com/tags/canvas_drawimage.asp

拖放不起作用。 JavaScript的

1 个答案: