将图像拖放到画布（FabricJS）

Posted 2023-03-25

【中文标题】将图像拖放到画布（FabricJS）

【英文标题】：Drag And Drop Image to Canvas (FabricJS)

【发布时间】：2015-11-07 02:32:31

【问题描述】：

问题 我想用图像而不是canvas 对象来做到这一点。这意味着您必须先添加要添加到画布的内容并作为画布的一部分，然后才能添加它。图片实际上是网站的一部分，所以它不需要做一些复杂的事情。我在此处找到的此代码仅适用于它是对象而不是实际元素的情况。顺便说一句，我使用 FabricJS 只是为了让您知道我没有使用默认的 html5 画布内容。

至于任何可能在不使用我当前代码的情况下工作的替代方案。请务必将其发布在 cmets 或答案中。我真的很想看看你们的想法。

总结 基本上我希望能够在保持鼠标光标位置的同时通过画布拖放图像。例如，如果我拖动图像并且光标位于 x: 50 y: 75 它会将图像拖放到那个确切的位置。就像我找到的代码一样。但是就像问题所说的那样，代码使用一个对象将它拖到画布上，然后克隆它。我想要这个功能只使用普通的旧元素。例如：<img>.

密码 - JsFiddle

window.canvas = new fabric.Canvas('fabriccanvas');
var edgedetection = 8; //pixels to snap
canvas.selection = false;

window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() 
    canvas.setHeight(window.innerHeight);
    canvas.setWidth(window.innerWidth);
    canvas.renderAll();


// resize on init
resizeCanvas();

//Initialize Everything
init();

function init(top, left, width, height, fill) 

    var bg = new fabric.Rect(
        left: 0,
        top: 0,
        fill:  "#eee",
        width: window.innerWidth,
        height: 75,    
        lockRotation: true,
        maxHeight: document.getElementById("fabriccanvas").height,
        maxWidth: document.getElementById("fabriccanvas").width,
        selectable: false,
    );

    var squareBtn = new fabric.Rect(
        top: 10,
        left: 18,
        width: 40,
        height: 40,
        fill: '#af3',
        lockRotation: true,
        originX: 'left',
        originY: 'top',
        cornerSize: 15,
        hasRotatingPoint: false,
        perPixelTargetFind: true,
    );

    var circleBtn = new fabric.Circle(
        radius: 20,
        fill: '#f55',
        top: 10,
        left: 105,
    );

    var triangleBtn = new fabric.Triangle(
        width: 40, 
        height: 35, 
        fill: 'blue', 
        top: 15,
        left: 190,
    );

    var sqrText = new fabric.IText("Add Square", 
        fontFamily: 'Indie Flower',
        fontSize: 14,
        fontWeight: 'bold',
        left: 6,
        top: 50,
        selectable: false,
    );

    var cirText = new fabric.IText("Add Circle", 
        fontFamily: 'Indie Flower',
        fontSize: 14,
        fontWeight: 'bold',
        left: 95,
        top: 50,
        selectable: false,
    );

    var triText = new fabric.IText("Add Triangle", 
        fontFamily: 'Indie Flower',
        fontSize: 14,
        fontWeight: 'bold',
        left: 175,
        top: 50,
        selectable: false,
    );

    var shadow = 
        color: 'rgba(0,0,0,0.6)',
        blur: 3,    
        offsetX: 0,
        offsetY: 2,
        opacity: 0.6,
        fillShadow: true, 
        strokeShadow: true 
    ;

    window.canvas.add(bg);
    bg.setShadow(shadow);
    window.canvas.add(squareBtn);
    window.canvas.add(circleBtn);
    window.canvas.add(triangleBtn);
    window.canvas.add(sqrText);
    window.canvas.add(cirText);
    window.canvas.add(triText);

    canvas.forEachObject(function (e) 
        e.hasControls = e.hasBorders = false; //remove borders/controls
    );

    function draggable(object) 
        object.on('mousedown', function() 
            var temp = this.clone();
            temp.set(
                hasControls: false,
                hasBorders: false,
            );
            canvas.add(temp);
            draggable(temp);
        );
        object.on('mouseup', function() 
            // Remove an event handler
            this.off('mousedown');

            // Comment this will let the clone object able to be removed by drag it to menu bar
            // this.off('mouseup');

            // Remove the object if its position is in menu bar
            if(this.top<=75) 
                canvas.remove(this);
            
        );
    

    draggable(squareBtn);
    draggable(circleBtn);
    draggable(triangleBtn);

    this.canvas.on('object:moving', function (e) 
        var obj = e.target;
        obj.setCoords(); //Sets corner position coordinates based on current angle, width and height
        canvas.forEachObject(function (targ) 
            activeObject = canvas.getActiveObject();


            if (targ === activeObject) return;


            if (Math.abs(activeObject.oCoords.tr.x - targ.oCoords.tl.x) < edgedetection) 
                activeObject.left = targ.left - activeObject.currentWidth;

            
            if (Math.abs(activeObject.oCoords.tl.x - targ.oCoords.tr.x) < edgedetection) 
                activeObject.left = targ.left + targ.currentWidth;

            
            if (Math.abs(activeObject.oCoords.br.y - targ.oCoords.tr.y) < edgedetection) 
                activeObject.top = targ.top - activeObject.currentHeight;
            
            if (Math.abs(targ.oCoords.br.y - activeObject.oCoords.tr.y) < edgedetection) 
                activeObject.top = targ.top + targ.currentHeight;
            
            if (activeObject.intersectsWithObject(targ) && targ.intersectsWithObject(activeObject)) 

             else 
                targ.strokeWidth = 0;
                targ.stroke = false;


            
            if (!activeObject.intersectsWithObject(targ)) 
                activeObject.strokeWidth = 0;
                activeObject.stroke = false;
                activeObject === targ
            
        );
    );

---

我找到的更多代码但没有回答我的问题：

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

canvas.on("after:render", function()canvas.calcOffset(););

var started = false;
var x = 0;
var y = 0;
var width = 0;
var height = 0;

canvas.on('mouse:down', function(options) 
  //console.log(options.e.clientX, options.e.clientY);

  x = options.e.clientX;
  y = options.e.clientY;

  canvas.on('mouse:up', function(options) 

    width = options.e.clientX - x;
    height = options.e.clientY - y;   

    var square = new fabric.Rect(

        width: width, 
        height: height, 
        left: x + width/2 - canvas._offset.left, 
        top: y + height/2 - canvas._offset.top, 
        fill: 'red',
        opacity: .2
    );
    canvas.add(square);
    canvas.off('mouse:up');
    $('#list').append('<p>Test</p>');

  );

);

这段代码在画布上添加了一个矩形。但问题是这并没有达到我想要的效果，基本上，如前所述，我希望能够拖动一个 img 元素，然后无论你在画布上拖动该图像的任何位置，它都会将它精确地放在那个位置位置。

学分Fabric JS: Copy/paste object on mouse down fabric.js Offset Solution

【参考方案1】：

它不需要做一些复杂的事情。

实现图像拖动的逻辑框架可能是使用事件侦听器监视鼠标事件。

当鼠标在页面中的一个图像元素上而不是画布上时，记录哪个图像元素和鼠标在图像中的位置。鼠标悬停在任意位置，将此记录设置回 null。

将鼠标悬停在具有非空图像记录的画布上，从 Image 元素创建一个 Fabric 图像元素（根据文档），计算它从记录的图像位置和当前鼠标位置到哪里，将其粘贴到鼠标下，使其可拖动并模拟鼠标点击的效果继续拖动。

我认为这个问题是关于程序开发的设计和可行性阶段。

【讨论】：

你能分享一些代码吗？我真的很感激。只是为了帮助我多一点。我知道你的意思，但我只需要更多信息。

我在该领域进行了研究，但我没有任何教程材料给你。由于在本论坛中正在进行的讨论不在主题范围内，我建议使用 Web 开发、标准、论坛、javascript、DOM 事件模型和教程（以某种组合形式）等关键字搜索网络以获取更多信息。祝你进步@RepeaterCreeper