我想这可以适用于任何动态语言,但我使用的是JavaScript.我们有一种情况,我们在JavaScript中编写了一些需要公开Send()函数的控件,然后由承载JavaScript的页面调用该函数.我们有一个定义了此Send函数的对象数组,因此我们遍历集合并在每个对象上调用Send().
在OO语言中,如果你想做类似的事情,你会有一个IControl接口,它有一个必须由每个控件实现的Send()函数,然后你有一个你要迭代的IControl实现的集合通过并调用send方法.
我的问题是,JavaScript是一种动态语言,是否需要定义控件应该继承的接口,还是只需要调用控件上公开的Send()函数就足够了？
Fabric.js中是否有对undo/redo的内置支持？你可以指导我如何使用这个取消并重复[http://printio.ru/][1]
有没有办法明确选择特定时刻出现的所有对象.这可以通过鼠标轻松完成全部选择.是否存在类似按钮的代码解决方案,Select All以便单击它将使所有结构类型对象被选中,然后我可以使用canvas.getActiveGroup();并迭代将更改应用于整个ActiveGroup .
我想将画布保存为PNG,而不是在新窗口中将其作为base64编码的图像打开.
我用过这段代码:
jQuery("#btnPreview").click(function(){
if (!fabric.Canvas.supports('toDataURL')) {
alert('Sorry, your browser is not supported.');
}
else {
canvas.deactivateAll();
canvas.forEachObject(function(o){
if(o.get("title") == "||Watermark||"){
canvas.bringToFront(o);
}
});
window.open(canvas.toDataURL('png'), "");
canvas.forEachObject(function(o){
if(o.get("title") == "||Watermark||"){
canvas.sendToBack(o);
}
});
canvas.renderAll();
}
});
我想使按钮将图像保存为PNG或JPG.
所以,让我说我有这个:
var d = document.createElement('div');
d.id = "whatever";`
那么,d是DOM对象,
如何创建或转换为jQuery对象？
例如
$(d)???
以及如何"读取"jQuery对象的所有属性？就像PHP的var_dump一样.
在fabricjs中,我想创建一个场景,其中鼠标下的对象在z-index中上升到场景的顶部,然后一旦鼠标离开该对象,它就会返回到它所来自的z-index.一个人不能设置object.zindex(这会很好).相反,我使用的占位符对象放在旧位置的对象列表中,然后使用canvas.insertAt将旧对象放回到列表中的位置.但这不起作用.
请参阅http://jsfiddle.net/rFSEV/了解其状态.
var canvasS = new fabric.Canvas('canvasS', { renderOnAddition: false, hoverCursor: 'pointer', selection: false });
var bars = {}; //storage for bars (bar number indexed by group object)
var selectedBar = null; //selected bar (group object)
var placeholder = new fabric.Text("XXXXX", { fontSize: 12 });
//pass null or a bar
function selectBar(bar) {
if (selectedBar) {
//remove the old topmost bar and put it back in the right zindex
//PROBLEM: It doesn't go back; it stays at the …如何使用fabric.js在画布上加载的图像上实现裁剪工具？我在画布上加载了一个图像.现在我想实现裁剪工具,允许用户裁剪图像并在完成后将其重新加载到画布上.
我在这里找到了Javascript画布的兔子标记.
当然,我知道他们的默认渲染器使用的是webGL,但我现在只对本机2D上下文性能感兴趣.我在firefox上禁用了webGL,在产生了16500个兔子之后,计数器显示了25的FPS.我决定编写自己的一个非常简单的渲染循环,看看Pixi添加了多少开销.令我惊讶的是,我的FPS只有20.
我大致相当于JSFiddle.
所以我决定在这里查看它们的源代码,它似乎并不是魔术在它们的渲染代码中:
do
{
transform = displayObject.worldTransform;
...
if(displayObject instanceof PIXI.Sprite)
{
var frame = displayObject.texture.frame;
if(frame)
{
context.globalAlpha = displayObject.worldAlpha;
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
context.drawImage(displayObject.texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
(displayObject.anchor.x) * -frame.width,
(displayObject.anchor.y) * -frame.height,
frame.width,
frame.height);
}
}
奇怪的是,似乎他们正在使用链接列表进行渲染循环,两个应用程序上的配置文件显示,虽然我的版本为每帧分配相同数量的CPU时间,但它们的实现显示了尖峰中的CPU使用率.
不幸的是,我的知识在这里结束了,我很好奇是否有人可以了解最新情况.
我刚开始使用Fabric.js(我不得不说,我印象深刻).
我想在Fabric对象上添加一个网格.在下面的代码中,我将网格画布正好放在Fabric画布上.这里的问题是,我现在无法移动我的布料对象!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js'></script>
</head>
<body>
<div style="height:480px;width:640px;border:1px solid #ccc;position:relative;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">
<canvas id="rubber" width="800" height="800"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="myCanvas" width="800" height="800"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
<script>
//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
function renderGrid(x_size,y_size, color)
{
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
context.save();
context.lineWidth = 0.5;
context.strokeStyle = color;
// horizontal grid lines
for(var …我有一个jQuery的Select2的问题.
当页面加载时,如果O点击搜索结果,它将选择并触发事件onchange,但只是第一次.
如果我再搜索一次,它就不会.
这是我的代码(这是一个基于Ajax的搜索):
jQuery('#search_code').select2({
'width': '600px',
'tokenSeparators': [',', ' '],
'closeOnSelect': false,
'placeholder': 'scan or type a SKU or product or ESN',
'minimumInputLength': 1,
'ajax': {
'url': 'lookProduct',
'dataType': 'json',
'type': 'POST',
'data': function (term, page) {
return {
barcode: term,
page_limit: 3,
page: page
};
},
'results': function (data, page) {
return {
results: data
};
}
}
}).on('change', function (e) {
var str = $("#s2id_search_code .select2-choice span").text();
DOSelectAjaxProd(this.value, str);
//this.value
}).on('select', function (e) {
console.log("select");
});