Question

单页上有两个可拖动的问题，最后一个有效，我想将图像从两侧的两个区域拖到一个普通的画布上，

我正在尝试将图像从两个可拖动区域拖动到可放置区域。它适用于一个可丢弃的区域，当两个可拖动的区域我有问题从一个区域拖动图像.. 你可以看到左右两个图像部分。

当图像从左侧大小删除时，我得到未定义的消息，但是当从右侧删除图像时它可以正常工作。

我无法弄清楚它为什么不起作用。

html代码

    <!DOCTYPE html>
<html>
    <head>
        <title>Drag and Drop</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script> 
        <script src="http://fabricjs.com/lib/fabric.js"></script>
        <!--script src="js/Delicious_500.font.js"></script-->
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>

        <div id="wrapper">
<table>
<tr>
<td>
            <ul id="image-list">
                <li><img src="http://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG" class="draggable-image"></li>
            </ul>
</td><td>
            <div id="content">
                <canvas id="canvas" width="640" height="512">
                    Canvas not supported in your browser!
                </canvas>

                <div id="canvas-drop-area"></div>

                <textarea id="text-input"></textarea>

                <button id="create-text-obj">Go</button>
                <button id="save-as-image">Save as Image</button>
            </div>
</td><td>
            <ul id="image-list">

              <li><img src="http://www.gettyimages.com/CMS/Pages/ImageCollection/StaticContent/image1_%20164248809.jpg" class="draggable-image"></li>
            </ul>

</td></tr>
<tr><td><b>Delete</b></td><td></td><td></td></tr>
</table>
        </div>

        <script src="js/main.js"></script>
    </body>
</html>

main.js的代码

(function () {
    var canvas = new fabric.Canvas('canvas');
    var canvas_el = document.getElementById('canvas');

    $(document).ready(function () {
        $('#create-text-obj').on('click', function () {
            var text = $('#text-input').val();
            create_text_obj(text);
        });

        $('#save-as-image').on('click', function () {
            save_canvas();
        });

        /* Bring active object to the front of the canvas */
        canvas.on('mouse:down', function (e) {
            if (!(typeof (e.target) === 'undefined')) {
                canvas.bringToFront(e.target);
            }
        });

        /* Define drag and drop zones */
        var $drop = $('#canvas-drop-area'),
            $gallery = $('td > #image-list li');

        /* Define the draggable properties */
        $gallery.draggable({
            start: function () {
                $drop.css({
                    'display': 'block'
                })
            },
            stop: function () {
                $(this).find('img').css({
                    'opacity': 0.4
                });
                $drop.css({
                    'display': 'none'
                });
            },
            revert: true
        });

        /* Define the events for droppable properties */
        $drop.droppable({
            over: function (event, ui) {
                $(this).addClass('active');
            },
            drop: function (event, ui) {
                var image = event.originalEvent.target.src,
                    loc = windowToCanvas(canvas_el, event.clientX, event.clientY);
alert(image);
                img_to_canvas(image, loc.x, loc.y);
            },
            out: function (event, ui) {
                $(this).removeClass('active');
            },
            deactivate: function (event, ui) {
                $(this).removeClass('active');
            }
        });
    });

    var create_text_obj = function(text) {
        var text_obj = new fabric.Text(text, {
            fontFamily: 'Delicious_500',
            left: 600,
            top: 225,
            fontSize: 80,
            textAlign: "left",
            fill: "#FF0000" // Set text color to red
        });

        canvas.add(text_obj);
    }

    var img_to_canvas = function(image, x, y) {
        var img = new Image();
        img.src = image;
        fabric.Image.fromURL(img.src, function (source) {
            img = source.set({
                left: 320,
                top: 256,
                angle: 0
            });
            canvas.add(img);
            canvas.renderAll();
        });
    }

    var windowToCanvas = function(canvas, x, y) {
        var bbox = canvas.getBoundingClientRect();
        return {
            x: x - bbox.left * (canvas.width / bbox.width),
            y: y - bbox.top * (canvas.height / bbox.height)
        };
    }

    var save_canvas = function() {
        window.location = canvas.toDataURL("image/png");
    }
})();

Answer 1

查看更新的直播http://liveweave.com/pCo8e2
我们应该在开始拖动$draggedImage

时捕获图像

(function () {
    var canvas = new fabric.Canvas('canvas');
    var canvas_el = document.getElementById('canvas');

    $(document).ready(function () {
        $('#create-text-obj').on('click', function () {
            var text = $('#text-input').val();
            create_text_obj(text);
        });

        $('#save-as-image').on('click', function () {
            save_canvas();
        });

        /* Bring active object to the front of the canvas */
        canvas.on('mouse:down', function (e) {
            if (!(typeof (e.target) === 'undefined')) {
                canvas.bringToFront(e.target);
            }
        });

        /* Define drag and drop zones */
        var $drop = $('#canvas-drop-area'),
            $gallery = $('td > #image-list li'),
            $draggedImage=null;
        /* Define the draggable properties */
        $gallery.draggable({
            start: function (e) {
              $draggedImage=event.target;
  $drop.css({
                    'display': 'block'
                });
            },
            stop: function () {
                $(this).find('img').css({
                    'opacity': 0.4
                });
                $drop.css({
                    'display': 'none'
                });
            },
            revert: true
        });

        /* Define the events for droppable properties */
        $drop.droppable({
            over: function (event, ui) {
                $(this).addClass('active');
            },
            drop: function (event, ui) {
                var image =$draggedImage&& $draggedImage.src,
                    loc = windowToCanvas(canvas_el, event.clientX, event.clientY);
                img_to_canvas(image, loc.x, loc.y);
            },
            out: function (event, ui) {
                $(this).removeClass('active');
            },
            deactivate: function (event, ui) {
                $(this).removeClass('active');
            }
        });
    });

    var create_text_obj = function(text) {
        var text_obj = new fabric.Text(text, {
            fontFamily: 'Delicious_500',
            left: 600,
            top: 225,
            fontSize: 80,
            textAlign: "left",
            fill: "#FF0000" // Set text color to red
        });

        canvas.add(text_obj);
    };

    var img_to_canvas = function(image, x, y) {
        var img = new Image();
        img.src = image;
        fabric.Image.fromURL(img.src, function (source) {
            img = source.set({
                left: 320,
                top: 256,
                angle: 0
            });
            canvas.add(img);
            canvas.renderAll();
        });
    };

    var windowToCanvas = function(canvas, x, y) {
        var bbox = canvas.getBoundingClientRect();
        return {
            x: x - bbox.left * (canvas.width / bbox.width),
            y: y - bbox.top * (canvas.height / bbox.height)
        };
    };

    var save_canvas = function() {
        window.location = canvas.toDataURL("image/png");
    };
})();

单页上的两个可拖动不起作用

1 个答案: