我正在使用Raphael js在客户端上创建一些图形.但我现在希望能够直接在服务器上执行相同的操作,以便能够创建它们并将它们批量存储.
我找到了从客户端获取SVG形式Raphael的解决方案,但不是任何完全服务器端的解决方案.
有没有人有使用Raphael js服务器端的经验(例如使用Rhino)？
谢谢!
我不明白如何在某一点旋转我的对象.这是我的javascript
// create needle
var rsr = Raphael('rsr', '320', '240');
var needle = rsr.path("m 156.74443,870.84631 -2.26177,119.38851
4.38851,0 z"); needle.attr({id: 'needle',parent: 'layer1',fill:
'#ff6600',stroke: '#000000',"stroke-width": '0.61',"stroke-linecap":
'butt',"stroke-linejoin": 'miter',"stroke-miterlimit": '4',"stroke-
opacity": '1',"stroke-dasharray": 'none'});
needle.rotate(0);
needle.transform("t0,-812.36218").data('id', 'needle');
// get needle bounding box
var needleBox = needle.getBBox();
// calculate rotation point (bottom middle)
var x_rotate_point = needleBox.x + (needleBox.width/2);
var y_rotate_point = needleBox.y + needleBox.height;
// rotate needle
needle.attr({rotation: 0}).animate({transform:"r45,"+x_rotate_point
+","+y_rotate_point}, 6000);
// Creates circle at rotation point
var circle = rsr.circle(x_rotate_point, y_rotate_point, 10);
circle.attr("fill", …我有路径,然后我用Raphael JS画.代码如下所示:
var paper = Raphael($('#draw_here')[0], '32', '32');
var star = paper.path("M 22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32 z");
star.attr({
fill: 'white',
stroke: 'black',
title: 'This is a STAAAAAAAR!'
});
它工作,它绘制32 x 32像素的大明星.如何改变它的宽度和高度？
我试着这样做:
var paper = Raphael($('#draw_here')[0], 64, 64);
var star = paper.path("M 22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32 z");
star.attr({
fill: 'white',
stroke: 'black',
title: 'This is a STAAAAAAAR!',
width: 64,
height: 64
});
...但所有变化都是"纸元素"的宽度和高度,而不是明星的.
我想要做的就是当鼠标的光标在它上面时,星形会变大.
谢谢你的建议! …
我正在使用<text>和<tspan>为每一行创建SVG文本.文本有很多行,其中一行是空行,有些东西是这样的:
this is text line 1
this is text line 3
上面的例子是一个有三行的文本,其中一行是空的.
问题是SVG文本只显示两行而不是三行(第一行和结束行,没有中间行).
见这里:http://jsfiddle.net/svincoll4/DX4Cn/
任何人都有解决方案,使它显示三行？
注意:我使用Raphael JS创建这些文本.
我正在玩Raphael SVG库,我定义了一个持有Raphael画布的元素
<div id="canvas_container"></div>
我把拉斐尔帆布/纸放在里面:
paper = new Raphael(document.getElementById('canvas_container'), '100%', '100%');
现在我想获得画布的绝对宽度/高度.我想出了如何使用paper.canvas访问画布,但如果我尝试获取paper.canvas.width,我得到一个SVGAnimatedLength元素而不是宽度.
我注意到当使用Chrome开发工具并使用鼠标在控制台中选择paper.canvas时,所选元素在窗口中显示正确的绝对大小(当Chrome开发人员选择某个元素时,页面中出现蓝色选项安慰).但是如何在代码中获取它？
我正在寻找一个可以转换如下内容的函数:
var points="270,328 270,376 342,376 342,368 358,368 358,320 314,320 298,336 278,336"
进入路径的SVG格式,我看到了这个问题/答案,但是我得到一个错误:未捕获TypeError:无法读取未定义的属性'ownerSVGElement'.这是因为我将我的var点放入该函数中,这不是为此设计的,我认为它需要完整的xml或其他东西.
任何建议都很棒,尤其是强制插画师导出路径而不是多边形!
谢谢!
我正在尝试使用rgba颜色的RaphaelJS创建渐变填充.换句话说,我希望起点和终点都具有一定程度的透明度.例如,20%黑色至0%黑色.这是怎么做到的？
这个小提琴就是我希望如何实现这一点,但正如你所看到的,底部的黑色是完全不透明的.http://jsfiddle.net/4aPj2/
r.circle(50,50,50).attr({fill:'90-rgba(0,0,0,0)-rgba(0,0,0,0.2)',opacity:0})
我想知道是否有一种方法可以在创建仪表后更改justGage的Value参数中文本的颜色和可能的装饰.
最后,我希望能够将下划线的文本颜色更改为蓝色,以便类似于链接.
谢谢.
我正在将一个raphael-sketchpad添加到一个放大弹出窗口中,以便可以在照片上绘制.我无法通过按钮清除草图以在iOS上工作.清除按钮是一个带有引导类"btn"的div,使它看起来像一个按钮,因此它已经有了光标:像一些人报告帮助一样添加了指针.
这是一个测试用例http://codepen.io/creativetags/pen/BrsAp
点击/单击图像打开弹出窗口,然后您可以在其上绘制并尝试清除按钮.
这是捕获按钮上的click事件的代码:
$(document).on('click', '#editor_clear', function(){
console.log('clicked clear');
sketchpad.clear();
});
演示:http://jsfiddle.net/p7Lze6nh/
使用Raphael JS 2.1.2,我试图在单击元素时禁用文本突出显示.它在Chrome上运行,但由于某些原因不在IE上.我目前没有在这台笔记本电脑上测试FF.
代码相对简单 -
var paper = Raphael(0, 0, 125, 125);
paper.canvas.style.backgroundColor = "Black";
var a = 0;
text1 = paper.text(10, 10, a).attr({"text-anchor":"start", fill:"white"});
rect1 = paper.rect(10, 50, 50, 50).attr({fill:"white"});
rect1.click(function(){
inc()
});
function inc() {
a++;
text1.attr({text: a});
}
我已经尝试使用'user-select:none'和其他各种CSS规则通过示例找到包含该文件的div,但这不起作用.我也试过用
text1.userSelect = "none";
...和其他人直接进入javascript,但我也没有到达任何地方.我记得Cookie Clicker有这个问题,但我似乎无法在代码中找到解决方案.但是,它也使用画布而不是拉斐尔.