小编kan*_*gax的帖子
Fabric.js - 绘制多个图像zindex的问题
我正在使用这个脚本:
var canvas = new fabric.Canvas('game_canvas', { selection: false });
fabric.Image.fromURL('images/bg.jpg', function(img) {
img.set('left', 1024/2).set('top', 600/2).set('zindex', 0);
canvas.add(img);
});
fabric.Image.fromURL('images/panel-2-bg-l-r.png', function(img) {
img.set('left', 262/2).set('top', (390/2)+110).set('zindex', 1);
canvas.add(img);
});
fabric.Image.fromURL('images/player-board.png', function(img) {
img.set('left', 254/2).set('top', (122/2)).set('zindex', 2);
canvas.add(img);
});
fabric.Image.fromURL('images/player-board-top-red.png', function(img) {
img.set('left', 203/2).set('top', (109/2)).set('zindex', 3);
canvas.add(img).bringToFront(img);
});
第三张图像绘制工作正常,并显示一个在另一个之上.但是,如果我添加第4个,它就会隐藏在第3个之后.如果我指定图像的zindex,它仍然只在第3个.
这有什么问题？我在这里做错了吗？请帮忙.
谢谢
彼得
推荐指数
解决办法
查看次数
将ID添加到Fabric.js元素
我正在使用Fabric.js库在Canvas中创建一个“类似于地图”的应用程序。实际上，我放下图像，然后使用正确的坐标在图像上方放置圆圈。点位置和名称作为从ajax调用接收的JSON数据传递。我需要一种方法来引用任何一个单独的圈子，以便可以获取有关该圈子的更多信息（每个圈子都有一个弹出窗口，其中包含更多详细信息）。
我在说明如何执行此操作的文档中找不到任何地方，我曾尝试向这样的对象添加ID：
tokens.add(new fabric.Circle({ radius: 25, fill: '#f55', top: 100, left: 70, id: "foo" }));
没有运气找回它。任何帮助将不胜感激。这也是我第一次与这个社区互动，所以如果我的问题不够详细，或者其他问题，我深表歉意。
推荐指数
解决办法
查看次数
Fabric.js 鼠标右键单击
有没有办法在 Fabric.js 画布上接收鼠标右键单击事件？
以下代码仅适用于左键单击：
canvas.observe('mouse:down', function(){console.log('mouse down'));
推荐指数
解决办法
查看次数
在FabricJS中,更改图像元素的src会更改该对象的所有属性
在Fabric.js画布中,我试图将图像对象的src替换为高分辨率图像,以便在canvas.toDataURLWithMultiplier使用时保持图像质量.
当我更改图像对象的src时,它的所有属性也会改变.图像对象自动缩放到不同的大小,并且所有状态属性都会更改.
这发生在0.9.15版本中.当我使用0.8.32版本时,它的工作原理.版本0.8.32没有此问题.
这是代码:
<body>
<button id="click" onclick="changeImage()">Change Image</button>
<canvas id="canvas" width="300px" height="300px" style="border:2px solid #000;">
<script>
canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL("http://timeplusq.com/dakshin/clip03.png", function(obj) {
canvas.add(obj.scale(1).rotate(-15).set({
left: 80, top: 95
}));
});
function changeImage(){
var tmp=canvas.item(0).getElement();
var src = tmp.src;
tmp.setAttribute("src", 'http://timeplusq.com/dakshin/clip03original.png');
//Its a 106KB size image
canvas.renderAll();
canvas.calcOffset();
}?
</script>
</body>
我试图获取图像对象的初始状态属性,然后设置更改的图像对象的值.但它没有用.
任何解决这个问题的方法？
推荐指数
解决办法
查看次数
我们如何限制Fabric.js中画布对象的最大宽度和高度
这是jsfiddle.
我想在调整对象大小时限制对象的最大高度/宽度.
这是代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
</head>
<body>
<canvas id="c" width="300" height="300" style="border:1px solid #ccc"></canvas>
<script>
(function() {
var canvas = new fabric.Canvas('c');
canvas.add(new fabric.Rect({ width: 50, height: 50, fill: 'red', top: 100, left: 100 }));
canvas.add(new fabric.Rect({ width: 30, height: 30, fill: 'green', top: 50, left: 50 }));
})();
</script>
</body>
</html>?
推荐指数
解决办法
查看次数
将双三次缩放滤镜应用于Pixi.js精灵
我正在使用基于WebGL的框架Pixi.js进行游戏,我尝试应用双三次缩放过滤器.在这种情况下,性能并不重要.
在这里,您可以看到使用CSS制作的示例:
请检查我的Chrome优化jsFiddle.
此代码用于线性缩放图像:
var stage = new PIXI.Stage(0xFFFFFF, true);
var bg = PIXI.Sprite.fromImage("image.png");
bg.scale.x = .125;
bg.scale.y = .25;
stage.addChild(bg);
var renderer = PIXI.autoDetectRenderer(93, 79);
document.body.appendChild(renderer.view);
var textureHasLoaded = false;
checkIfTextureHasLoaded();
function checkIfTextureHasLoaded(){
if (bg.texture.baseTexture.hasLoaded){
textureHasLoaded = true;
renderTexture();
}
if (!textureHasLoaded){
requestAnimFrame(checkIfTextureHasLoaded);
}
}
function renderTexture(){
renderer.render(stage);
}
推荐指数
解决办法
查看次数
selenium PhantomJS send_keys不起作用
我正在使用selenium和PhantomJS进行测试.我遵循Selenium的简单用法,但send_keys不适用于PhantomJS,它适用于Firefox.为什么？我必须button.click()改用吗？
#!/usr/bin/python
# -*- coding: utf-8 -*-
import sys
reload(sys)
sys.setdefaultencoding('utf-8')
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
driver = webdriver.PhantomJS()
driver.get("http://www.python.org/")
elem = driver.find_element_by_id("q")
elem.clear()
elem.send_keys("python")
elem.send_keys(Keys.RETURN)
# button = driver.find_element_by_id('submit')
# button.click()
print driver.title
print driver.page_source
driver.close()
推荐指数
解决办法
查看次数
如何在Fabric.js中填充两个对象的交集？
我正在使用 Fabric.js 创建一个简单的绘画应用程序。我在实现时遇到问题的功能之一是存储桶工具。
可以使用 Fabric.js 为对象填充颜色，canvas.item(0).fill = "red"
但是我希望能够填充两个对象 [A，B] 的交集 [C]。
有谁知道如何实现这一目标？我一直在寻找有关如何实现这一点的示例和教程，其中许多都指向“洪水填充”，但我认为它不能用 Fabric.js 来实现
任何帮助将不胜感激！
推荐指数
解决办法
查看次数
Fabric.js stage.getActiveObject().clone()与fabric.util.object.clone(stage.getActiveObject())
我正在使用Fabric.js,我正在尝试为图像和文本元素实现复制功能.我找到了两个关于如何复制对象的解决方案:
方法1
stage.getActiveObject().clone();
方法2
fabric.util.object.clone(stage.getActiveObject());
使用第一种方法时,不会发生克隆,使用第二种方法时,克隆确实会发生.更具体地说,对于第一种方法,我使用了以下代码:
var obj = stage.getActiveObject();
if (!obj) return;
var clone = obj.clone();
clone.set({
top: clone.get('top') + 30
});
stage.add(clone);
stage.renderAll();
在活动对象上运行此代码时,它会一直告诉克隆是未定义的.虽然两种方法都可以做同样的事情,但必须有充分的理由使用方法1或2.
有谁可以解释那两个之间的区别？
我注意到的另一件事是当使用第二种方法时,fabric.util.object.clone(stage.getActiveObject()); 克隆的对象获取与原始对象相同的ID.虽然克隆是原始的克隆,但我对他们共享相同的ID没有意义.换句话说,我如何克隆一个对象并给它一个唯一的ID？
推荐指数
解决办法
查看次数
如何在Fabric.js中绘制弧
我正在使用Fabric.js,我想在画布上绘制弧线.我能找到的最接近的形状是Circle形状.当然,这只能使我制作一个圆形,而不像弧形跨越45°或180°.
有没有办法用Fabric.js来实现这个目标？如果没有,有没有办法可以获得底层上下文,然后创建弧并允许结构管理它？保留Fabric.js提供的选择和扩展功能非常重要.
推荐指数
解决办法
查看次数