标签: raphael

我想了解如何向Raphael.js对象/路径添加模糊边缘阴影.据我所知,这是不可能的图书馆,但有一个解决方法吗？

可能重复:
在浏览器中将SVG转换为图像(JPEG,PNG等)

我有一个小项目,用户使用Raphael构建图表,然后将组合图表导出到图像中进行保存.

问题是它必须脱机运行.http://www.nihilogic.dk/labs/canvas2image/不会起作用,因为它需要画布,而不是Raphael生成的SVG.

有没有办法(javascript)我可以从SVG导出图像？

我正在收集一些必须在几周内开始的项目的信息.该项目包含基于浏览器的绘图工具,用户可以在其中添加预定义的形状或自己形成形状.形状必须是可选择的,可自由缩放,并可使用类似Illustrator的transformtool(手柄)旋转.我们想到的预定义形状是:矩形,椭圆,半椭圆和(等腰)三角形.

到目前为止,为了达到这个目的,我想到了RaphaelJS或FabricJS但是...每个形状(多边形/路径)都必须用某个cornerradius绘制.并且在缩放时必须保持角半径,因此不会发生失真.用户可以通过输入指定舍入.

有一些障碍/问题:

• 是否有一些统一的数学公式将角半径应用于我提到的形状？或者每个形状都必须被视为迷你项目本身？我想将它作为路径或多边形返回,因此可以使用SVG或画布绘制它.
• 通过拖动变换手柄,每个缩放或旋转操作都将导致(大量)计算以检索我认为的更新形状.矩形是最容易实现的,除了椭圆之外,所有其他形状将更难计算.有没有办法加快这个过程？

我找到了一个网站,用户可以在其中绘制流程图并在几乎所有提供的形状上应用cornerradius.它运作得非常顺利,我无法确定它们是如何做到的.链接:https://www.lucidchart.com/(尝试按钮)

就目前而言,我有点无能为力,我想在数学方面平庸.也许有人可以把我推向正确的方向并分享一些经验？

提前致谢.

BTW.绩效是这个项目的关键.图纸的输出必须是SVG格式.

我试图使用Raphael JS图形库.我想使用属性梯度,它应该接受一个对象.文档说参考SVG规范.例如,我在SVG中找到了渐变对象

<linearGradient id="myFillGrad" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="5%" stop-color="red" />
<stop offset="95%" stop-color="blue" stop-opacity="0.5" />
</linearGradient>

但我如何从我的JavaScript中引用它？

circle.attr("gradient", "myFillGrad"); 

不起作用:)提前谢谢

我将如何在Raphael中绘制连接线,其中mousedown启动线的起点,鼠标移动终点而不移动起点,鼠标按原样离开？

如何在raphaeljs库中获取鼠标光标坐标？

我正在尝试这样的事情:

rect.mousemove(function (event) {
        thisGrid.Popup.Show(event.layerX, event.layerY, ["clientX:", event.clientX, " clientY:", event.clientY, "\n", "layerX:", event.layerX, "layerY:", event.layerY, "\n",
            "pageX:", event.pageX, "pageY:", event.pageY].join(' '));

                        }
                    );

但是所有这些属性都返回窗口相对左上角的坐标或其他东西.

这是截图

我正在开发一个应用程序,它使用Raphael绘制原始形状(矩形,椭圆,三角形等)和线条,但也允许用户移动/调整这些对象的大小.其中一个主要要求是形状的面可以有格式化的文本.实际文本是Markdown的一个子集(简单的事情,如粗体,斜体,列表),并呈现为HTML.

FWIW - 我正在使用Backbone.js视图来模块化形状逻辑.

方法1

我最初的想法是使用foreignObjectSVG和直接HTML与VML for IE的组合.但是,IE9不支持foreignObject,因此必须放弃这种方法.

方法2

使用canvas对象旁边,添加div包含实际HTML的s.然后,将它们放在具有透明背景的实际形状上.我创建了一个形状视图,它引用了拉斐尔的实际形状和"叠加" div.这种方法存在一些问题:

1. 使用不是SVG/VML容器子代的叠加感觉不对.这个叠加元素会导致其他问题吗？

2. 通常被Raphael困住的事件(拖动,点击等)需要从叠加层转发到Raphael对象.对于支持的浏览器pointer-events,这很容易做到:

   div.shape-text-overlay {
     position: absolute;
     background: none;
     pointer-events: none;
   }
   

   但是,其他浏览器(如IE8及以下版本)需要转发事件:

   var forwardedEvents = 'mousemove mousedown mouseup click dblclick mouseover mouseout';
   this.$elText.on(forwardedEvents, function(e) {
   
     var original = e.originalEvent;
   
     var event;
     if (document.createEvent) {
       event = document.createEvent('HTMLEvents');
       event.initEvent(e.type, true, true);
     } 
     else {
       event = document.createEventObject();
       event.eventType = e.type;
     }
   
     // FYI - This …

我第一次使用Raphaël只有很少的svg经验,我需要一个真正了解这两个人的人来帮助我.

我创建了一个包含动态扇区的饼图.可以通过拖动圆形按钮来调整扇区的大小.看到这个小提琴.我只在Chrome和Safari中测试过,这是唯一需要的浏览器.

饼图尚未完成.这些部门可以重叠.请暂时忽略这一点.

当扇区的起始角度大于结束角度时,我遇到了问题.当结束角度超过0/360°标记时就是这种情况.为了解决这个问题,我使用了path- rotation -parameter.我向后移动扇区,同时向后移动角度,直到结束角度为360.你可以在这个函数的小提琴中看到这个:

function sector_update(cx, cy, r, startAngle, endAngle, sec) {
    var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);


    var rotation = 0;

    // This is the part that I have the feeling could be improved.
    // Remove the entire if-clause and let …

任何人都可以给我一个这些属性的例子:stroke-dasharray,stroke-linecap,stroke-linejoin我尝试使用它们,但我不太了解它们的值的sentext结构.

我正在尝试创建一个脚本,通过鼠标在元素中绘制一些东西,我正在使用Raphaeljs它.

对于正确的图纸我需要找到top和left的input??元素.我使用的是var offset = $("#input").offset();得到left和top.

但top价值不正确.它10px低于实际top距离.我认为10px可能在不同的分辨率上有所改变,然后我无法正常添加10px它然后我想知道如何解决问题!

我在这里上传了我的考试.