小编kan*_*gax的帖子
Fabric.js中的SVG显示/渲染问题
我正在使用FabricJS,我在画布中遇到了SVG显示问题:
- 结果显示在fabricJS的选择框之外(由于翻译？)
- 选择的锚点在转换后消失,然后无法找回它们.
这是一个截图:
我正在使用Potrace的输出SVG,我认为这是我的问题的起源.
以下是SVG的代码:pastebin中的SVG代码
您可以在此页面上使用FabricJS进行测试:FabricJS Kitchensing示例.
只需将SVG的代码粘贴到"加载SVG"区域,然后调整大小并旋转剖面框以显示SVG.
你知道我的SVG代码的一部分还是导致问题的fabricjS代码的一部分？如果是这样,我可以自己轻松更改吗？如果没有,是否有可能纠正或找出可能的错误？
非常感谢您的帮助.
编辑:貌似,FabricJS不喜欢SVG的这一行:
<g transform="translate(0,648) scale(0.098780,-0.098780)" fill="#000000" stroke="none">
更特别是翻译和比例属性......如何解决？
EDIT2:解决方案是,translate和scale分别等于(0,0)和(1,1),或者更好的是,它们应用于坐标.
有没有人有想法用Potrace或JS脚本做到这一点？
推荐指数
解决办法
查看次数
在Fabric.js画布上添加网格
我刚开始使用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>
//<
编辑:最好不使用三角法,如果在fabricjs本身或其他地方实现了更简单的方法.
推荐指数
解决办法
查看次数
Pixi.js中的自定义字体
我尝试将自定义字体加载到Pixi.js(2D WebGL框架)中.
他们有一个使用.woff谷歌字体的例子:
https://github.com/GoodBoyDigital/pixi.js/tree/master/examples/example%2010%20-%20Text
我将.ttf转换为.woff并添加到css中:
@font-face
{
font-family: "HU_Adrien";
src: local('HU_Adrien'), url('HU_A0046.woff') format('woff');;
}
div.font{
font-family: "HU_Adrien";
color: white;
}
它显示在我的div中但不在我的Pixi阶段.
...
// create a text object with a nice stroke
var spinningText = new PIXI.Text("I'm fun!", {font: "160px HU_Adrien", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6});
// setting the anchor point to 0.5 will center align the text... great for spinning!
spinningText.anchor.x = spinningText.anchor.y = 0.5;
spinningText.position.x = 620 / 2;
spinningText.position.y = 400 / 2;
...
推荐指数
解决办法
查看次数
在Fabric.js中反序列化JSON对象
我正在使用fabricjs开发协作白板.当用户创建新的结构对象时,我将其序列化并将其发送给所有其他用户.
var rect = new fabric.Rect();
canvas.add(rect);
socket.emit("newObject", JSON.stringify(rect)); // sends the object to other users
当这些用户收到序列化对象时,应将其反序列化并添加到其画布中.做这个的最好方式是什么？我无法找到一个反序列化单个对象的函数,只有整个画布(loadFromJSON),所以我实现了一个不优雅的解决方案:
function drawRoomObjects(roomObjects){
var canvasString = "{\"objects\":[";
for(var roomObjectKey in roomObjects){
canvasString += roomObjects[roomObjectKey];
}
canvasString += "], \"background\":\"\"}";
var tmpCanvas = new fabric.Canvas();
tmpCanvas.loadFromJSON(canvasString);
for(var k in tmpCanvas.getObjects()) {
canvas.add(tmpCanvas._objects[k]);
}
canvas.renderAll();
}
有什么建议可以做更好的方法吗？
推荐指数
解决办法
查看次数
在Fabric.js中设置对象拖动限制
我是织物js的新手想要设置阻力限制
我也试过https://github.com/kangax/fabric.js/wiki/Working-with-events
无法得到解决方案.
请检查附图,对象可以移动任何软件,但它应该只显示在红色区域.我想要这个.帮帮我...提前谢谢!!
推荐指数
解决办法
查看次数
SMACSS,BEM和OOCSS不是便携式的吗？
所以我对OOCSS有疑问.它应该更便携,但与我通常做的事情相比,我发现它不那么容易.
我的例子:
我有一个小部件见证.在主要内容正文(具有白色背景)中,证词具有黑色字体.但是在页脚(具有蓝色背景)中,证词需要白色字体.
在OOCSS之前,我会做这样的事情:
#main-content .testominial {
color: #000000;
}
#footer .testominial {
color: #FFFFFF;
}
使用这种"旧"方法,我可以将我的小部件从内容区域拖到页脚,颜色可以简单地工作 - 我不需要更改我的小部件的CSS或DOM类.
使用新的OOCSS/BEM,我不应该将.testimonial类耦合到ID(或位置),而是我应该像这样继承它:
.testominial {
color: #000000;
}
.testominial--footer {
color: #FFFFFF;
}
这样做的问题是,我不能再将我的推荐从内容区域拖到页脚而不进入DOM并更改推荐小部件上的类 - 它是轻便的,因为它需要开发人员的手动干预; 而在编辑器可以拖动它之前,样式是自动的.
我错过了什么吗？似乎没有可靠的现实世界的例子吗？
推荐指数
解决办法
查看次数
Firebug"XML不能成为整个程序"的错误信息是什么意思？
我刚刚在Firebug中收到此错误消息.谷歌搜索只能揭示其他神秘人物!有谁知道这意味着什么？
它在这个3行脚本的最后一行显示:
<script>
g_BuildServer = "/";
</script>
推荐指数
解决办法
查看次数