javascript - 复制并粘贴自定义 FabricJS 对象-6ren

javascript - 复制并粘贴自定义 FabricJS 对象

转载作者：行者123 更新时间：2023-12-01 01:56:17

25

4

我正在尝试在 FabricJS 项目中复制和粘贴对象。

这是FabricJS版本2.3.3

使用 native FabricJS 对象，它可以正常工作。与演示中完全相同 ( http://fabricjs.com/copypaste )。

但是在我创建自定义类之后(例如此处 http://fabricjs.com/cross )我无法根据我的自定义类粘贴对象。复制没问题，只是粘贴函数会抛出错误。

我得到的只是控制台日志中的错误:this._render 不是指向 FabricJS 库中某些行号的函数。

谁能告诉我为什么吗？谢谢!

这是我的自定义类:

const C_Cross = fabric.util.createClass(fabric.Object, {

    initialize: function(options) {
        this.callSuper('initialize', options);

        this.width = 100;
        this.height = 100;

        this.w1 = this.h2 = 100;
        this.h1 = this.w2 = 30;
    },

    _render: function (ctx) {
        ctx.fillRect(-this.w1 / 2, -this.h1 / 2, this.w1, this.h1);
        ctx.fillRect(-this.w2 / 2, -this.h2 / 2, this.w2, this.h2);
    }

});

这是 HTML 文件:(仅限 BODY 标记)

<body>

<canvas id="c" width="1000" height="800" style="border:1px solid #ccc"></canvas>

<br>

<button onclick="testCopy()">COPY</button>
<button onclick="testPaste()">PASTE</button>


<script type="text/javascript">
    var TheCanvas = new fabric.Canvas('c');

    var myCross = new C_Cross({ top: 100, left: 100 });
    TheCanvas.add(myCross);
</script>

</body>

这里有复制和粘贴的功能:

function testCopy(){
    TheCanvas.getActiveObject().clone(function(cloned) {
        TheClipboard = cloned;
    });
}

function testPaste(){
    TheClipboard.clone(function(clonedObj) {
        TheCanvas.discardActiveObject();
        clonedObj.set({
            left: clonedObj.left + 10,
            top: clonedObj.top + 10,
            evented: true,
        });
        if (clonedObj.type === 'activeSelection') {
            // active selection needs a reference to the canvas
            clonedObj.canvas = canvas;
            clonedObj.forEachObject(function(obj) {
                TheCanvas.add(obj);
            });
            // this should solve the unselectability
            clonedObj.setCoords();
        } else {
            TheCanvas.add(clonedObj);
        }
        TheClipboard.top += 10;
        TheClipboard.left += 10;
        TheCanvas.setActiveObject(clonedObj);
        TheCanvas.requestRenderAll();
    });
}

这是 FabricJS 库中崩溃的代码片段:在此函数的最后一行。

drawObject: function(ctx) {
      this._renderBackground(ctx);
      this._setStrokeStyles(ctx, this);
      this._setFillStyles(ctx, this);
      this._render(ctx); // <--- crashes here
},

最佳答案

您需要为自定义类添加fromObject。并且需要定义与类名相同的type，在查找特定类时需要读取。

演示

fabric.Cross = fabric.util.createClass(fabric.Object, {
  type: 'cross',
  initialize: function(options) {
    this.callSuper('initialize', options);

    this.width = 100;
    this.height = 100;

    this.w1 = this.h2 = 100;
    this.h1 = this.w2 = 30;
  },

  _render: function(ctx) {
    ctx.fillRect(-this.w1 / 2, -this.h1 / 2, this.w1, this.h1);
    ctx.fillRect(-this.w2 / 2, -this.h2 / 2, this.w2, this.h2);
  }

});

fabric.Cross.fromObject = function(object, callback) {
  var cross = new fabric.Cross(object);
  callback && callback(cross);
  return cross;
};

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

var myCross = new fabric.Cross({
  top: 100,
  left: 100
});
TheCanvas.add(myCross);

function testCopy() {
  TheCanvas.getActiveObject().clone(function(cloned) {
    TheClipboard = cloned;
    console.log(TheClipboard)
  });
}

function testPaste() {
  TheClipboard.clone(function(clonedObj) {
    TheCanvas.discardActiveObject();
    clonedObj.set({
      left: clonedObj.left + 10,
      top: clonedObj.top + 10,
      evented: true,
    });
    if (clonedObj.type === 'activeSelection') {
      // active selection needs a reference to the canvas
      clonedObj.canvas = TheCanvas;
      clonedObj.forEachObject(function(obj) {
        TheCanvas.add(obj);
      });
      // this should solve the unselectability
      clonedObj.setCoords();
    } else {
      TheCanvas.add(clonedObj);
    }
    TheClipboard.top += 10;
    TheClipboard.left += 10;
    TheCanvas.setActiveObject(clonedObj);
    TheCanvas.requestRenderAll();
  });
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>
<br>
<button onclick="testCopy()">COPY</button>
<button onclick="testPaste()">PASTE</button>

关于javascript - 复制并粘贴自定义 FabricJS 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51014263/

25

4

0

文章推荐： javascript - 为什么对象不分配 null

文章推荐： python - Tensorflow:我的虹膜分类器(没有估计器)无法工作

文章推荐： jquery - FullCalendar 从月到日更改 View

文章推荐： python - 根据最内维度某个特定索引处的值将张量掩码为 0

iphone - 复制(复制)核心数据记录和相关记录
我正在编写一个应用程序，允许用户创建一个“问卷”，然后向其中添加问题。我正在使用核心数据来存储信息。我创建了一个问卷实体，并与问题实体建立了“一对多”关系。我的问题是，如果要允许用户复制(复制)整个调
Android:复制/复制 SharedPreferences
有没有办法复制或复制 SharedPreference？或者我需要从一个变量中获取每个变量，然后将它们放入另一个变量中吗？最佳答案尝试这样的事情: //sp1 is the shared pref
objective-c - @property(复制)与方法[复制]
下面的(A)和(B)有区别吗？ (假设 NON ARC，如果重要的话) // --- (A) --- @interface Zoo : NSObject{} @property (copy) Dog
php - 复制/复制/克隆 mysql_result 对象
我正在尝试将 mysql SELECT 查询保存到文件中，如下所示: $result = mysqli_query($db,$sql); $out = fopen('tmp/csv.csv', 'w'
ios - 使用 CVPixelBufferCreate 复制/复制 CVPixelBufferRef
我需要创建一个 CVPixelBufferRef 的副本，以便能够使用副本中的值以按位方式操作原始像素缓冲区。我似乎无法使用 CVPixelBufferCreate 或 CVPixelBufferCr
c# - 使用 Naudio 复制 Wave 文件 - 复制/附加最新的可用字节
我在 Source 文件夹中有一个 Active wave 录音 wave-file.wav。我需要使用新名称 wave-file-copy.wav 将此文件复制到 Destination 文件夹。
autotools - 文件由 `make dist` 复制，但未由 `make distcheck` 复制
在使用 GNU Autotools 构建的项目中，我有一个脚本需要通过 make 修改以包含安装路径。这是一个小例子: configure.ac: AC_INIT(foobar, 1.0) AC_PR
mysql - 使用 blob/text 复制/复制 SQL 行，怎么做？
我想将 SQL 的行复制到同一个表中。但是在我的表中，我有一个“文本”列。使用此 SQL: CREATE TEMPORARY TABLE produit2 ENGINE=MEMORY SELECT
python Pandas DataFrame 复制(deep=False)vs 复制(deep=True)vs '='
谁能给我解释一下 df2 = df1 df2 = df1.copy() df3 = df1.copy(deep=False) 我已经尝试了所有选项并执行了以下操作: df1 = pd.DataFram
Hazelcast 复制？
Hazelcast 是否具有类似于 Ehcache 的复制？ http://www.ehcache.org/generated/2.9.0/pdf/Ehcache_Replication_Guide.
MySQL远程连接(复制)
我有以下拓扑。一个 Ubuntu 16.04。运行我的全局 MySQL 服务器的 Amazon AWS 上的实例。我想将此服务器用作许多本地主服务器(Windows 机器 MySQL 服务器)的从服务
MySQL 复制
使用 SQLyog，我正在测试表中是否设置了正确的值。我尝试过 SELECT type_service FROM service WHERE email='test@gmail.com' 因此，只输出
Elasticsearch 复制
有人可以提供一些关于如何配置 ElasticSearch 进行复制的说明。我在 Windows 中运行 ES，并且了解如果我在同一台服务器上多次运行 bat 文件，则会启动一个单独的 ES 实例，并且
复制 Thread 数组
一点睛 ThreadGroup 复制线程的两个方法。 public int enumerate(Thread list[]) // 会将 ThreadGroup 中的 active 线程全部复制到
复制 ThreadGroup 数组
一点睛 ThreadGroup 复制线程组的两个方法。 public int enumerate(ThreadGroup list[]) // 相对于 enumerate（list,true） pu
添加新数据中心时用于系统模式的 Cassandra 复制
官方documentation Cassandra 说: Configure the keyspace and create the new datacenter: Use ALTER KEYSPAC
r - 如何在ggplot2中绘制加权黄土平滑度？ [复制]
This question already has answers here: How to weight smoothing by arbitrary factor in ggplot2? (2个答
excel - 复制/导出多列
我们有一个表格来表明对各种俱乐部的兴趣。输出将数据记录在 Excel 电子表格中，其中列有他们的首选姓名、姓氏、电子邮件、代词，以及他们感兴趣的俱乐部的相应列中的“1”(下面的模型)。我们希望为俱乐
vim - 如何使Vim带您回到上次编辑文件时的状态？ [复制]
This question already has answers here: Closed 8 years ago. Possible Duplicate: In vim, how do I get
vba - 复制/粘贴具有形状的单元格
如何复制形状及其所在的单元格？当我手动复制时，形状会跟随单元格，但是当我使用宏进行复制时，我会得到除形状之外的所有其他内容。 Cells(sourceRow, sourceColumn).Copy C

首页

博学

6Ren·AI

商城

javascript - 复制并粘贴自定义 FabricJS 对象