- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我面临一个关于织物事件的奇怪问题。看看这个片段
canvas.on('object:added', function(e) {
console.log(e.target.type);
console.log("Something was Added");
});
canvas.on('object:removed', function(e) {
console.log(e.target.type);
console.log("Something was removed");
});
// Undo Redo Clear
canvas.counter = 0;
var newleft = 0;
canvas.selection = false;
var state = [];
var mods = 0;
canvas.on(
'object:modified', function () {
updateModifications(true);
},
'object:added', function () {
updateModifications(true);
},
'object:removed' , function(e){
updateModifications(true);
console.log('test me');
});
function updateModifications(savehistory) {
if (savehistory === true) {
myjson = JSON.stringify(canvas);
state.push(myjson);
console.log(myjson);
}
}
undo = function undo() {
if (mods < state.length) {
canvas.clear().renderAll();
canvas.loadFromJSON(state[state.length - 1 - mods - 1]);
canvas.renderAll();
mods += 1;
//check_team();
//compare_states(state[state.length - 1 - mods - 1] , state[state.length - 1 - mods + 1])
}
//make_objects_selectable();
}
redo = function redo() {
if (mods > 0) {
canvas.clear().renderAll();
canvas.loadFromJSON(state[state.length - 1 - mods + 1]);
canvas.renderAll();
mods -= 1;
//check_team();
}
//make_objects_selectable();
}
clearcan = function clearcan() {
canvas.clear().renderAll();
newleft = 0;
}
最佳答案
您的撤消和重做功能基本上都做同样的事情,删除 Canvas ,加载新状态并渲染它。清除 Canvas 时,没有 object:removed
事件,但触发了另一个事件,称为 canvas:cleared
.这就是为什么你永远看不到你的 object:removed
撤消/重做时触发的事件。另一方面,您确实看到了 object:added
撤消和重做都被触发,因为我猜 canvas.renderAll
将当前状态的每个对象添加到 Canvas 中(因为之前使用 canvas.clear() 删除了它)。
编辑
更好的解决方案是存储在 Canvas 上发生的每个操作,例如添加、修改或删除,并将每个操作与一些对象数据相关联。例如,您可以有一个 object_added
与添加对象的序列化相关的操作,或 object_removed
与已移除对象的序列化相关联的操作。对于 object_modified
您将需要两个关联的对象序列化,一个是事先修改,一个是修改后。如果是 canvas_cleared
操作,您必须将整个 Canvas 状态存储为关联数据。
一个简单的堆栈结构可以很好地用于操作存储。
function SimpleStackException(msg) {
this.message = msg;
this.name = 'SimpleStackException';
}
function SimpleStack() {
var MAX_ENTRIES = 2048;
var self = this;
self.sp = -1; // stack pointer
self.entries = []; // stack heap
self.push = function(newEntry) {
if (self.sp > MAX_ENTRIES - 1) {
throw new SimpleStackException('Can not push on a full stack.');
}
self.sp++;
self.entries[self.sp] = newEntry;
// make sure to clear the "future" stack after a push occurs
self.entries.splice(self.sp + 1, self.entries.length);
};
self.pop = function() {
if (self.sp < 0) {
throw new SimpleStackException('Can not pop from an empty stack.');
}
var entry = self.entries[self.sp];
self.sp--;
return entry;
};
self.reversePop = function() {
self.sp++;
if (!self.entries[self.sp]) {
self.sp--;
throw new SimpleStackException('Can not reverse pop an entry that has never been created.');
}
return self.entries[self.sp];
}
}
var actionHistory = new SimpleStack();
canvas.getObjects()
中的对象,但这是一个普通的 js 数组,并没有多大帮助。我以 UUID 的形式添加了对象 ID。
var lut = [];
for (var i = 0; i < 256; i++) {
lut[i] = (i < 16 ? '0' : '') + (i).toString(16);
}
function generateUuid() {
var d0 = Math.random() * 0xffffffff | 0;
var d1 = Math.random() * 0xffffffff | 0;
var d2 = Math.random() * 0xffffffff | 0;
var d3 = Math.random() * 0xffffffff | 0;
return lut[d0 & 0xff] + lut[d0 >> 8 & 0xff] + lut[d0 >> 16 & 0xff] + lut[d0 >> 24 & 0xff] + '-' +
lut[d1 & 0xff] + lut[d1 >> 8 & 0xff] + '-' + lut[d1 >> 16 & 0x0f | 0x40] + lut[d1 >> 24 & 0xff] + '-' +
lut[d2 & 0x3f | 0x80] + lut[d2 >> 8 & 0xff] + '-' + lut[d2 >> 16 & 0xff] + lut[d2 >> 24 & 0xff] +
lut[d3 & 0xff] + lut[d3 >> 8 & 0xff] + lut[d3 >> 16 & 0xff] + lut[d3 >> 24 & 0xff];
}
fabric.Object.prototype.uuid = "";
fabric.Object.prototype.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
uuid: this.uuid,
});
};
})(fabric.Object.prototype.toObject);
function getFabricObjectByUuid(uuid) {
var fabricObject = null;
canvas.getObjects().forEach(function(object) {
if (object.uuid === uuid) {
fabricObject = object;
}
});
return fabricObject;
}
actionHistory
因此:
canvas.on('path:created', function(path) {
var object = path.path;
object.uuid = generateUuid();
actionHistory.push({
type: 'object_added',
object: JSON.stringify(object)
});
});
canvas.on('object:added', function(e) {
var object = e.target;
// bypass the event for path objects, as they are handled by `path:created`
if (object.type === 'path') {
return;
}
// if the object has not been given an uuid, that means it is a fresh object created by this client
if (!object.uuid) {
object.uuid = generateUuid();
}
if (!object.bypassHistory) {
actionHistory.push({
type: 'object_added',
object: JSON.stringify(object)
});
}
});
canvas.on('object:modified', function(e) {
var object = e.target;
actionHistory.push({
type: 'object_modified',
objectOld: JSON.stringify(latestTouchedObject),
objectNew: JSON.stringify(object)
});
});
canvas.on('text:changed', function(e) {
var object = e.target;
actionHistory.push({
type: 'text_changed',
objectOld: JSON.stringify(latestTouchedObject),
objectNew: JSON.stringify(object)
});
});
canvas.on('object:removed', function(e) {
var object = e.target;
if (!object.bypassHistory) {
actionHistory.push({
type: 'object_removed',
object: JSON.stringify(object)
});
}
});
canvas.on('canvas:cleared', function(e) {
if (!canvas.bypassHistory) {
actionHistory.push({
type: 'canvas_cleared',
canvas: JSON.stringify(canvas)
});
}
});
actionHistory
上的实际数据.还要注意
uuid
属性实际上是添加到对象中的。关于上面的代码片段有两点需要注意。
path:cleared
来保存该操作。 .但是,在以编程方式绘制线的情况下(例如,在执行重做时),您可能不想存储操作。要添加此自定义属性,请执行以下操作:event.target
轻松获得的object:modified
事件,必须以编程方式跟踪“之前”版本。在我的解决方案中,我有一个高水平 latestTouchedObject
跟踪 Canvas 上最新修改对象的变量。 canvas.on('mouse:down', function(options) {
if (options.target) {
latestTouchedObject = fabric.util.object.clone(options.target);
}
});
function undoAction() {
var action, objectCandidate;
try {
action = actionHistory.pop();
} catch (e) {
console.log(e.message);
return;
}
if (action.type === 'object_added') {
objectCandidate = JSON.parse(action.object);
var object = getFabricObjectByUuid(objectCandidate.uuid);
object.bypassHistory = true;
canvas.remove(object);
} else if (action.type === 'object_removed') {
objectCandidate = JSON.parse(action.object);
fabric.util.enlivenObjects([objectCandidate], function(actualObjects) {
actualObjects[0].uuid = objectCandidate.uuid;
var object = actualObjects[0];
object.bypassHistory = true;
canvas.add(object);
object.bypassHistory = false;
});
} else if (action.type === 'object_modified' || action.type === 'text_changed') {
objectCandidate = JSON.parse(action.objectOld);
fabric.util.enlivenObjects([objectCandidate], function(actualObjects) {
actualObjects[0].uuid = objectCandidate.uuid;
var object = actualObjects[0];
var existingObject = getFabricObjectByUuid(objectCandidate.uuid);
if (existingObject) {
existingObject.bypassRemoveEvent = true;
existingObject.bypassHistory = true;
canvas.remove(existingObject);
}
object.bypassHistory = true;
canvas.add(object);
object.bypassHistory = false;
});
} else if (action.type === 'canvas_cleared') {
var canvasPresentation = JSON.parse(action.canvas);
canvas.bypassHistory = true;
canvas.loadFromJSON(canvasPresentation);
canvas.renderAll();
canvas.bypassHistory = false;
}
}
function redoAction() {
var action, objectCandidate;
try {
action = actionHistory.reversePop();
} catch (e) {
console.log(e.message);
return;
}
if (action.type === 'object_added') {
objectCandidate = JSON.parse(action.object);
fabric.util.enlivenObjects([objectCandidate], function(actualObjects) {
actualObjects[0].uuid = objectCandidate.uuid;
var object = actualObjects[0];
object.bypassHistory = true;
canvas.add(object);
object.bypassHistory = false;
});
} else if (action.type === 'object_removed') {
objectCandidate = JSON.parse(action.object);
var object = getFabricObjectByUuid(objectCandidate.uuid);
object.bypassHistory = true;
canvas.remove(object);
object.bypassHistory = false;
} else if (action.type === 'object_modified' || action.type === 'text_changed') {
objectCandidate = JSON.parse(action.objectNew);
fabric.util.enlivenObjects([objectCandidate], function(actualObjects) {
actualObjects[0].uuid = objectCandidate.uuid;
var object = actualObjects[0];
var existingObject = getFabricObjectByUuid(objectCandidate.uuid);
if (existingObject) {
existingObject.bypassRemoveEvent = true;
existingObject.bypassHistory = true;
canvas.remove(existingObject);
}
object.bypassHistory = true;
canvas.add(object);
object.bypassHistory = false;
});
} else if (action.type === 'canvas_cleared') {
canvas.clear();
}
}
关于javascript - 对象 :removed Event Not Fired - Fabric JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37273470/
我试图创建 Kindle Fire 模拟器来测试 Kindle Fire 平板电脑、Fire 手机和亚马逊电视的应用程序。我已经按照文档进行操作,但无法为这些创建模拟器。谁能告诉我亚马逊是否支持模拟器
以下代码运行大约需要 20 秒。然而,取消注释 do! 后只用了不到一秒的时间。为什么会有这么大的差异? 更新:使用ag.Add时需要9秒。我已经更新了代码。 open FSharpx.Control
我曾经将图像保存到 fire base storage 它在所有 android 设备上工作但在 amazon fire 上,它抛出错误。 这是日志 W/GooglePlayServicesUtil:
我想为 Fire TV 应用程序进行 Google 登录。不幸的是,我不能为此使用 Google Play 服务,所以我需要解决这个问题。我唯一能想到的就是让登录屏幕成为 uiwebview Goog
我们有 Gem Fire 6 数据,想将其迁移到 Gem Fire 8 数据。为此有哪些可能的选择?我们需要这个,因为我们的客户可能不乐意丢失 Gem Fire 6 服务器中的数据。请指教。 最佳答案
我是 Quartz 的新手,一直在重复作业运行。它们是由两个触发时间重叠的触发器引起的。 是否有任何 Quartz 的“开箱即用”功能可以防止重复触发具有多个附加触发器的同一作业? 或者也许有一些第三
我一直在尝试测试事件,昨天我让它工作了。那是在我开始重构测试代码以防止它过于重复之前。我添加了 setUp 方法调用以使用 ModelFactories 生成假数据。这是昨天在每个测试用例中完成的,并
我想在我关注文本区域之前触发一个事件(即在键盘出现在 iOS 上之前)。 这可能吗? 我处理焦点的代码在这里: $(document).on('focus', 'textarea', function
我使用 HTML5 和 JavaScript 开发了 Fire TV 应用程序。这里我需要识别当前访问的设备是什么。 Amazon Fire TV 或 Amazon Fire Stick。 如何使用
Angular 版本: @angular-devkit/architect 0.803.22 @angular-devkit/build-angular 0.803.22 @a
python包Fire对于从命令行启动 python 脚本非常有用。一件常见的事情是有由多个单词组成的参数,例如可以用 3 种通用方式编写的 cat 的名称: nameofcat name_of_ca
我正在尝试使用 javascript 检测我的网站是否在 kindle fire 移动设备上运行。我试过使用 navigator.userAgent 和 navigator.appVersion 但我
hi This : var fees=document.getElementById("conn"); var btn=document.getE
我在网上查过,但找不到任何东西: 如何摆脱在我正在观看的电影上显示的这个通知圈? 最佳答案 这个东西来自 ES 文件浏览器 只需进入此应用程序 > 设置 然后有一个选项说记录 float 窗口,你只需
我需要知道当用户通过新的 Fullscreen API 进入全屏模式时会触发哪些(DOM)事件。我尝试了这个片段,但它没有触发: jQuery('body').on('fullScreenChange
我试图通过在加载页面时隐藏 webView 来在不同网页的加载之间进行转换。但是,我发现一些图像密集型网站导致 webViewDidFinishLoading 过早触发,当我在此时显示 webView
我的应用程序使用 MVVM 模式。我的 TextBox绑定(bind)到我的 ViewModel 的属性(类型字符串)。 何时 TextBox 的内容通过用户输入更改,我想执行一些验证。 所以,目前,
有谁知道如何检测该应用程序是否在Kindle Fire上运行? 如果在Kindle Fire上运行,我的应用程序需要关闭一些功能,并且我想使用与Google Marketplace相同的版本。 最佳答
如何告诉 jQuery 仅触发一次回调函数? $(document).on('ready turbolinks:load', function callback_function() { co
使用新的HTML音频标签: Your browser does not support the audio element. 在我尝试过的所有浏览器(IE v10,Chrome v23,O
我是一名优秀的程序员,十分优秀!