Question

drag&drop和resizing的JavaScript。现在，当我单击一个按钮时，我可以在画布中加载图像并且它是可拖动的。但是，当我第二次点击时，第一张图像消失，而新的图像即将到来，我想要两张图像。这是我正在使用的代码：

<html>
<head>
    <script src="fabric.min.js"></script>
</head>
<body>
    <canvas id="c"></canvas>
    <img src="icon_03.jpg" id="my-image">
    <button onclick="myFunction()">click</button>
    <script>
        function myFunction() {
            var canvas = new fabric.Canvas('c');
            var imgElement = document.getElementById('my-image');
            var imgInstance = new fabric.Image(imgElement, {
                left: 100,
                top: 100,
                angle: 30,
                opacity: 0.85
            });
            canvas.add(imgInstance);
        };
    </script>
</body>
</html>

Answer 1

我认为问题在于，您正在函数中创建一个canvas对象，因此总会有一个新的画布，它是空的，并在现有画布上绘制。我更新了你的小提琴，这样每当你点击按钮时，画布上都会添加一个新图像：http://jsfiddle.net/z4fty1de/7/

这是我的代码：

var canvas  = new fabric.Canvas('c');
$('#image').click(myFunction);
function myFunction() {
            var imgElement = document.getElementById('my-image');
            var imgInstance = new fabric.Image(imgElement, {
                left: 100,
                top: 100,
                angle: 30,
                opacity: 0.85
            });
            canvas.add(imgInstance);
};

我希望我能帮助你。：）

使用函数首次加载的图像在再次发生时隐藏

1 个答案: