Почему на холсте ничего не появляется, когда изображение сбрасывается?

Question

Почему на холсте ничего не появляется, когда изображение сбрасывается?

0

У меня есть код, который не дает никаких ошибок, но когда я удаляю изображение в холст, вместо применения изображения к холсту ничего не происходит вообще. Я подозреваю, что это связано с функцией handledrop в javascript, но я не уверен.

пс. im с использованием Fabricjs

Заранее спасибо за помощь :)

HTML:

<!doctype html>
<html lang="en";>
<head>
    <meta charset="utf-8" />
    <title>CustomCase</title>
    <link rel="stylesheet" href="SkapaDesign.css">
    <script src="Jquery.js"></script>
    <script src="Modernizr.js"></script>
    <script src="Fabric.js"></script>
    <script src="Canvas.js"></script>
</head>
<body>  
    <div id="Wrapper">  
        <section id="Body">
                <div id="CanvasDiv">
                    <canvas id="Canvas" width="270px" height="519px"></canvas>
                </div>

                <div id="TextureView">
                    <div id="TextureViewInside">
                        <div id="images">
                            <img draggable="true" src="FärgadePapper.png">
                            <img draggable="true" src="Hajar.png">
                            <img draggable="true" src="Labyrint.png">
                            <img draggable="true" src="Martini.png">
                        </div>
                    </div>
                </div>  
        </section>
    </div>
</body>
</html>

CSS:

#Body{
    height: 675px;
}
#Canvas, #TextureView{
    float: left;
}
#LeftColumn{
    float: left;
    width: 355px;
    margin: 20px 30px 0px 0px;
}
#RightColumn{
    float: left;
    width: 600px;
    margin-top: 20px;
}
#CanvasDiv{
    width: 270px;
    height: 519px;
    margin-left: 15px;
}
#Canvas{
    overflow: hidden;
}
#TextureView{
    width: 470px;
    height: 559px;
    overflow: auto;
}
#TextureViewInside{
    padding: 10px;
}
#images img{
    width: 97px;
    display: inline-block;
    vertical-align: top;
    padding: 4px;
}

Javascript:

var canvas = new fabric.Canvas('Canvas');

function handleDragStart(e) {
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');
    });
    this.classList.add('img_dragging');
}

function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault(); 
    }
    e.dataTransfer.dropEffect = 'copy';
    return false;
}

function handleDragEnter(e) {
    this.classList.add('over');
}

function handleDragLeave(e) {
    this.classList.remove('over');
}

function handleDrop(e) {
    if (e.stopPropagation) {
        e.stopPropagation();
    }

    var img = document.querySelector('#images img.img_dragging');

    console.log('event: ', e);

    var newImage = new fabric.Image(img, {
        width: img.width,
        height: img.height,
        left: e.layerX,
        top: e.layerY
    });
    canvas.add(newImage);

    return false;
}

function handleDragEnd(e) {
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');
    });
}


$(function() {
     if (Modernizr.draganddrop) {
         var images = document.querySelectorAll('#images img');
         [].forEach.call(images, function (img) {
             img.addEventListener('dragstart', handleDragStart, false);
             img.addEventListener('dragend', handleDragEnd, false);
         });
         var canvasContainer = document.getElementById('CanvasDiv');
         canvasContainer.addEventListener('dragenter', handleDragEnter, false);
         canvasContainer.addEventListener('dragover', handleDragOver, false);
         canvasContainer.addEventListener('dragleave', handleDragLeave, false);
         canvasContainer.addEventListener('drop', handleDrop, false);
     } else {
         alert("This browser doesn't support the HTML5 Drag and Drop API.");
     }
});

user2961869 11 нояб. 2013, в 22:30

Источник

0

Вы можете сделать скрипку, чтобы проверить то же самое
John 12 нояб. 2013, в 03:13

Теги:

javascript

jquery

css

html5

fabricjs

1 ответ

Ещё вопросы

Вы можете сделать скрипку, чтобы проверить то же самое

Dan Brown · Answer 1 · 2013-11-12T10-33-00.000Z

Убедитесь, что класс img_dragging правильно применяется к элементу. У меня была аналогичная проблема, когда

var images = document.querySelectorAll('#images img');

Не удалось собрать все изображения в Firefox, но это произошло в Chrome.

Ознакомьтесь с этим JSFiddle решения: http://jsfiddle.net/DanBrown180/USQ7w/

Я исправил это, применив нисходящий идентификатор к каждому изображению, которое я мог бы затем захватить. В частности, этот фрагмент кода:

 function handleDragStart(e) {
    $('img').removeAttr('class').attr('class', 'img');
    console.log("Drag Started");
    console.log(e)
    var imageid = e.target.id;
    if (imageid == "") {
        var imageid = e.target.firstChild.id
    }
    console.log(imageid);
    $("#" + imageid).addClass('img_dragging');
    //this.classList.add('img_dragging');


 }

В моей скрипте JS, которая исправляет ошибку, хром находит цель с помощью:

e.target.id;

и firefox использует:

e.target.firstChild.id