正文 

当前位置： 首页 > 问答 >

将图像拖放到画布（FabricJS）

     2023-03-25     254

关键词：

【中文标题】将图像拖放到画布（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

HTML5 将图像从工具栏拖放到画布

】HTML5将图像从工具栏拖放到画布【英文标题】：HTML5draganddropimagesfromatoolbartoacanvas【发布时间】：2014-03-0612:47:03【问题描述】：我进行了很多搜索，但找不到与我的需求相关的场景。我想将图像从工具栏拖放到画布，而不是从画... 查看详情

动力学js将图像从dom拖放到画布中

】动力学js将图像从dom拖放到画布中【英文标题】：kineticjsdraganddropimagefromdomintocanvas【发布时间】：2013-04-2216:40:03【问题描述】：我已经在dom上加载了一个图像，我希望能够将该图像拖到画布中并将其拖放到画布中并从中创建一... 查看详情

使用 selenium 拖放到画布图像中的点

】使用selenium拖放到画布图像中的点【英文标题】：Draganddroptopointincanvasimageusingselenium【发布时间】：2020-11-1311:41:29【问题描述】：对于我的自动化测试，作为测试的一部分，我需要将图标拖放到图像上，我已经看到可以从A点拖... 查看详情

将fabricjs画布转换为base64图像

】将fabricjs画布转换为base64图像【英文标题】：Convertfabricjscanvastobase64image【发布时间】：2018-06-2614:36:49【问题描述】：我正在尝试将画布作为图像发送到我的服务器，并且我想以base64格式发送。Fabricjs提供使用canvas.toSVG()或canvas.t... 查看详情

使用 FabricJs 在同一画布上裁剪多个图像

】使用FabricJs在同一画布上裁剪多个图像【英文标题】：CropmultipleimagesonsamecanvasusingFabricJs【发布时间】：2016-12-2023:07:38【问题描述】：我想将图像添加到画布并一次选择一个并应用裁剪以请看一下：http://jsfiddle.net/kNEaX/586/原帖：... 查看详情

是否可以同时在 FabricJS 画布上独立拖放多个对象？

】是否可以同时在FabricJS画布上独立拖放多个对象？【英文标题】：Isitpossibletoindependentlydrag&dropmultipleobjectsonaFabricJScanvasatthesametime?【发布时间】：2014-02-1618:42:58【问题描述】：我正在开发带有Fabric.js的基于触摸的应用程序。... 查看详情

在 JSON FabricJS 中包含图像数据

】在JSONFabricJS中包含图像数据【英文标题】：IncludeImageDatainJSONFabricJS【发布时间】：2018-12-2806:33:38【问题描述】：我正在尝试使用FabricJS画布，我想将画布导出为JSON。我尝试使用newfabric.Image和fabric.Image.fromURL加载图像，它们都很... 查看详情

Fabric Js - 是不是可以将图像对象自动缩放到画布上？

】FabricJs-是不是可以将图像对象自动缩放到画布上？【英文标题】：FabricJs-Isitpossibletoautoscaleaimageobjecttothecanvas?FabricJs-是否可以将图像对象自动缩放到画布上？【发布时间】：2016-05-2801:02:41【问题描述】：我们目前通过以下代码... 查看详情

从画布中删除图像-fabricjs（javascript）

】从画布中删除图像-fabricjs（javascript）【英文标题】：removeimagefromcanvas-fabricjs(javascript)【发布时间】：2015-07-2917:49:39【问题描述】：我正在开发Web应用程序，其中大部分部分已被Angularjs覆盖。我被困在一个点上。我使用fabric.js... 查看详情

在 FabricJS 画布上拖放和删除对象

】在FabricJS画布上拖放和删除对象【英文标题】：Drag,dropanddeleteobjectsonFabricJScanvas【发布时间】：2017-08-0814:53:13【问题描述】：我在使用JQuery处理FabricJS时遇到问题。选择一个对象并单击删除没有问题。这是我的代码演示Fiddle我可... 查看详情

使用 FabricJS 裁剪图像

】使用FabricJS裁剪图像【英文标题】：CropanimageusingFabricJS【发布时间】：2016-05-2513:13:39【问题描述】：我想使用(javascript)FabricJS+HTML5画布裁剪图像。画布的背景图像是一个织物图像对象。作物面积是一个FabricJS矩形。我也附上了一... 查看详情

仅更改覆盖图像的颜色而不是整个画布 Fabricjs

】仅更改覆盖图像的颜色而不是整个画布Fabricjs【英文标题】：ChangecolorofoverlayimageonlyinsteadofthewholecanvasFabricjs【发布时间】：2020-10-1901:55:53【问题描述】：我有一个画布，上面有透明T恤的背景图像。现在我想动态改变t恤的颜色... 查看详情

如何将图像拖放到容器中，然后根据拖放到容器中的内容更新容器？

】如何将图像拖放到容器中，然后根据拖放到容器中的内容更新容器？【英文标题】：HowcanIdropanimagetoacontainerandthenupdatethecontainerbasedonwhatwasdroppedtoit?【发布时间】：2011-07-0501:33:57【问题描述】：我希望能够将图像拖到两个容器之... 查看详情

将图像拖放到 RichTextBox 中

】将图像拖放到RichTextBox中【英文标题】：DraganddropanimageintoaRichTextBox【发布时间】：2015-07-2420:28:41【问题描述】：我正在更新在VB4中完成的代码，其中我有一个RichTextBox。我需要能够将图像从Windows资源管理器拖放到RTB。不幸的是... 查看详情

将图像从 Firefox 拖放到 Microsoft Powerpoint

】将图像从Firefox拖放到MicrosoftPowerpoint【英文标题】：DragginganddroppingimagesfromFirefoxintoMicrosoftPowerpoint【发布时间】：2012-02-2419:11:55【问题描述】：我正在尝试制作一个网页，允许用户将图像拖放到MicrosoftOffice应用程序中，特别是Po... 查看详情

根据fabricjs的下拉选择拆分画布（动态）屏幕

】根据fabricjs的下拉选择拆分画布（动态）屏幕【英文标题】：splitcanvas(dynamically)screensbasedonthedropdownselectionforfabricjs【发布时间】：2021-06-1703:01:02【问题描述】：我正在尝试在织物js中创建分屏，例如1、2、4、8,16基于drop的选择画... 查看详情

FabricJS：始终在画布上居中对象

】FabricJS：始终在画布上居中对象【英文标题】：FabricJS:AlwaysCenterObjectonCanvas【发布时间】：2013-06-2015:31:05【问题描述】：是否可以在fabricjs画布上始终将对象居中？背景：我正在构建一个web工具，可以很容易地使用fabricjs创建复... 查看详情

使用fabricjs从json到图像

】使用fabricjs从json到图像【英文标题】：Fromjsontoimageusingfabricjs【发布时间】：2020-02-2608:12:49【问题描述】：我将一个fabricjs画布作为json保存在我的数据库中。我无意修改它，我只是想恢复它，调整它的大小，最后创建一个PNG或JP... 查看详情