- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想用 FabricJS 复制/粘贴对象,问题是当我复制和粘贴 I 文本时,它变得不可编辑,我想让它可编辑。
这是 JsFiddle:http://jsfiddle.net/7Hsdh/11/
Javascript:
var canvas = new fabric.Canvas('paper');
// adding text on canvas
var text = new fabric.Text('Normal Uneditable Text', {
left: 100,
top: 150,
fontFamily: 'Arial',
fontSize: 15,
fill: '#333'
});
canvas.add(text);
var text = new fabric.IText('IText : not editable anymore once copy/pasted why?', {
left: 10,
top: 50,
fontFamily: 'Arial',
fontSize: 20,
fill: '#333'
});
canvas.add(text);
canvas.renderAll();
createListenersKeyboard();
function createListenersKeyboard() {
document.onkeydown = onKeyDownHandler;
}
function onKeyDownHandler(event) {
var key;
if(window.event){
key = window.event.keyCode;
}
else{
key = event.keyCode;
}
switch(key){
case 67: // Ctrl+C
if(event.ctrlKey){
event.preventDefault();
copy();
}
break;
case 86: // Ctrl+V
if(event.ctrlKey){
event.preventDefault();
paste();
}
break;
default:
// TODO
break;
}
}
var copiedObject,
copiedObjects = new Array();
function copy(){
copiedObjects = new Array();
if(canvas.getActiveGroup()){
canvas.getActiveGroup().getObjects().forEach(function(o){
var object = fabric.util.object.clone(o);
copiedObjects.push(object);
});
}
else if(canvas.getActiveObject()){
var object = fabric.util.object.clone(canvas.getActiveObject());
copiedObject = object;
copiedObjects = new Array();
}
}
function paste(){
if(copiedObjects.length > 0){
for(var i in copiedObjects){
copiedObjects[i]=fabric.util.object.clone(copiedObjects[i]);
copiedObjects[i].set("top", copiedObjects[i].top+100);
copiedObjects[i].set("left", copiedObjects[i].left+100);
canvas.add(copiedObjects[i]);
canvas.item(canvas.size() - 1).hasControls = true;
}
}
else if(copiedObject){
copiedObject= fabric.util.object.clone(copiedObject);
copiedObject.set("top", 10);
copiedObject.set("left", 10);
canvas.add(copiedObject);
canvas.item(canvas.size() - 1).hasControls = true;
}
canvas.renderAll();
}
问题出在哪里,我该如何解决它,以便我也可以复制/粘贴 Itext 并保持原样,而不是将其转换为简单文本?
最佳答案
如果不深入研究 FabricJS 代码,我无法回答“为什么”(我猜这是你问题的一部分)——但我相信如果你真的想知道,你可以自己深入研究 FabricJS 代码.
但是,这里需要对您的代码进行一些调整以使其适合您:
function paste() {
if (copiedObjects.length > 0) {
for (var i in copiedObjects) {
if (/text/.test(copiedObjects[i].type)) {
canvas.add(new fabric.IText(copiedObjects[i].text, {
left: copiedObjects[i].left + 100,
top: copiedObjects[i].top + 100,
fontFamily: copiedObjects[i].fontFamily,
fontSize: copiedObjects[i].fontSize,
fill: copiedObjects[i].fill
}));
} else {
copiedObjects[i] = fabric.util.object.clone(copiedObjects[i]);
copiedObjects[i].set("top", copiedObjects[i].top + 100);
copiedObjects[i].set("left", copiedObjects[i].left + 100);
canvas.add(copiedObjects[i]);
}
canvas.item(canvas.size() - 1).hasControls = true;
}
} else if (copiedObject) {
if (/text/.test(copiedObject.type)) {
canvas.add(new fabric.IText(copiedObject.text, {
left: 10,
top: 10,
fontFamily: copiedObject.fontFamily,
fontSize: copiedObject.fontSize,
fill: copiedObject.fill
}));
} else {
copiedObject = fabric.util.object.clone(copiedObject);
copiedObject.set("top", 10);
copiedObject.set("left", 10);
canvas.add(copiedObject);
}
canvas.item(canvas.size() - 1).hasControls = true;
}
canvas.renderAll();
}
我的猜测,IText 背后的底层对象实际上只是一个普通的旧 Text 对象,带有一个覆盖层以使其响应键盘/鼠标事件。
这是您的 JSFiddle 更新,http://jsfiddle.net/7Hsdh/13/ .
希望对你有所帮助,伙计!
关于javascript - 如何在 FabricJS 上复制/粘贴后保持 IText 可编辑?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42925401/
我正在编写一个应用程序,允许用户创建一个“问卷”,然后向其中添加问题。我正在使用核心数据来存储信息。我创建了一个问卷实体,并与问题实体建立了“一对多”关系。我的问题是,如果要允许用户复制(复制)整个调
有没有办法复制或复制 SharedPreference?或者我需要从一个变量中获取每个变量,然后将它们放入另一个变量中吗? 最佳答案 尝试这样的事情: //sp1 is the shared pref
下面的(A)和(B)有区别吗? (假设 NON ARC,如果重要的话) // --- (A) --- @interface Zoo : NSObject{} @property (copy) Dog
我正在尝试将 mysql SELECT 查询保存到文件中,如下所示: $result = mysqli_query($db,$sql); $out = fopen('tmp/csv.csv', 'w'
我需要创建一个 CVPixelBufferRef 的副本,以便能够使用副本中的值以按位方式操作原始像素缓冲区。我似乎无法使用 CVPixelBufferCreate 或 CVPixelBufferCr
我在 Source 文件夹中有一个 Active wave 录音 wave-file.wav。我需要使用新名称 wave-file-copy.wav 将此文件复制到 Destination 文件夹。
在使用 GNU Autotools 构建的项目中,我有一个脚本需要通过 make 修改以包含安装路径。这是一个小例子: configure.ac: AC_INIT(foobar, 1.0) AC_PR
我想将 SQL 的行复制到同一个表中。但是在我的表中,我有一个“文本”列。 使用此 SQL: CREATE TEMPORARY TABLE produit2 ENGINE=MEMORY SELECT
谁能给我解释一下 df2 = df1 df2 = df1.copy() df3 = df1.copy(deep=False) 我已经尝试了所有选项并执行了以下操作: df1 = pd.DataFram
Hazelcast 是否具有类似于 Ehcache 的复制? http://www.ehcache.org/generated/2.9.0/pdf/Ehcache_Replication_Guide.
我有以下拓扑。一个 Ubuntu 16.04。运行我的全局 MySQL 服务器的 Amazon AWS 上的实例。我想将此服务器用作许多本地主服务器(Windows 机器 MySQL 服务器)的从服务
使用 SQLyog,我正在测试表中是否设置了正确的值。我尝试过 SELECT type_service FROM service WHERE email='test@gmail.com' 因此,只输出
有人可以提供一些关于如何配置 ElasticSearch 进行复制的说明。我在 Windows 中运行 ES,并且了解如果我在同一台服务器上多次运行 bat 文件,则会启动一个单独的 ES 实例,并且
一 点睛 ThreadGroup 复制线程的两个方法。 public int enumerate(Thread list[]) // 会将 ThreadGroup 中的 active 线程全部复制到
一 点睛 ThreadGroup 复制线程组的两个方法。 public int enumerate(ThreadGroup list[]) // 相对于 enumerate(list,true) pu
官方documentation Cassandra 说: Configure the keyspace and create the new datacenter: Use ALTER KEYSPAC
This question already has answers here: How to weight smoothing by arbitrary factor in ggplot2? (2个答
我们有一个表格来表明对各种俱乐部的兴趣。输出将数据记录在 Excel 电子表格中,其中列有他们的首选姓名、姓氏、电子邮件、代词,以及他们感兴趣的俱乐部的相应列中的“1”(下面的模型)。 我们希望为俱乐
This question already has answers here: Closed 8 years ago. Possible Duplicate: In vim, how do I get
如何复制形状及其所在的单元格?当我手动复制时,形状会跟随单元格,但是当我使用宏进行复制时,我会得到除形状之外的所有其他内容。 Cells(sourceRow, sourceColumn).Copy C
我是一名优秀的程序员,十分优秀!