标签: raphael

RaphaelJS:创建点击元素?

我需要在多个可点击元素的顶部叠加标签.我希望能够通过顶部的标签点击元素.

这可能吗?如果是这样,我将如何做到这一点?

svg raphael

13
推荐指数
1
解决办法
2380
查看次数

合并来自Raphael svg的图片

尝试创建
第1步 - 让用户通过Ajax,Raphael和Raphael freetransform上传图像.

步骤2 - 单击按钮以显示合并上载图像中的一个图像.(问题): 我找到了关于转换Raphael svg 1 2 3的类似帖子 ,
所以我也使用Canvg但得到console.log :Resource interpreted as image but transferred with MIME type text/html error: image "" not found.

请帮我找到解决方法.或任何线索如何达到相同的目标(将上传的几个Raphael svg图像转换为一个png/jpeg)?

谢谢!

步骤1

// upload images and ajax show in page
var paper = Raphael($('.upload_img')[0], 400, 200);
$('.upload_btn').click(function(){
    ...
    $.ajax({
        type: "POST",
        url: "index.php",
        data: fd,
        processData: false,
        contentType: false,
        success: function(html){
            var session = ..., file = ... type = ...; 
            function register(el) {
                // …
Run Code Online (Sandbox Code Playgroud)

jquery svg raphael canvg

13
推荐指数
1
解决办法
847
查看次数

使用raphaeljs javascript图形库清除容器的最简单方法

我必须清除并重绘一个raphael javascript主容器.我试过了

var paper = Raphael(10, 50, 320, 200);
paper.remove();  // Doesn't work
paper.node.removeNode();    //this neither
paper.removeNode();   //this neither

任何的想法?

javascript svg clear raphael

12
推荐指数
2
解决办法
1万
查看次数

HTML5 Canvas与SVG + Raphael.js的优点和缺点是什么?

我刚刚使用Canvas开始了一个项目.但我需要的一件事就是跟踪可移动的,可点击的盒子,如下例所示:http://raphaeljs.com/graffle.html所以我想知道Raphael-js + SVG会不会更好.

你会用哪个?为什么?

javascript svg raphael html5-animation

12
推荐指数
2
解决办法
1万
查看次数

为div创建线性透明渐变

我想为div创建一个线性透明渐变.有没有办法用jquery做到这一点?或者我应该使用像raphaeljs这样的其他库吗?我想达到如下效果:

替代文字

javascript css jquery opacity raphael

12
推荐指数
2
解决办法
1万
查看次数

Raphael JS有效地实施"铅笔"工具

我正在开发一个项目,要求最终用户能够在浏览器中绘制svg-edit,并将SVG数据发送到服务器进行处理.

我开始玩Raphael框架,看起来很有希望.

目前我正在尝试使用铅笔或freeline类型工具.基本上我只是根据绘图区域中鼠标移动的百分比绘制一条新路径.然而,最终这将创造大量的路径来处理.

是否可以通过将鼠标移动转换为使用曲线和直线路径而不是线段来缩短SVG路径?

下面是草案代码我掀起来做这个工作......

    // Drawing area size const
   var SVG_WIDTH = 620;
   var SVG_HEIGHT = 420;

   // Compute movement required for new line
   var xMove = Math.round(SVG_WIDTH * .01);
   var yMove = Math.round(SVG_HEIGHT * .01);

   // Min must be 1
   var X_MOVE = xMove ? xMove : 1;
   var Y_MOVE = yMove ? yMove : 1;

   // Coords
   var start, end, coords = null;
   var paperOffset = null;
   var mouseDown = false;

   // Get …
Run Code Online (Sandbox Code Playgroud)

javascript svg raphael

12
推荐指数
1
解决办法
5473
查看次数

Raphael JS:如何移动/动画路径对象?

不知怎的,这不起作用......

var paper = Raphael("test", 500, 500);

var testpath = paper.path('M100 100L190 190');

var a = paper.rect(0,0,10,10);
a.attr('fill', 'silver');

a.mousedown( function() {
  testpath.animate({x: 400}, 1000);
});
Run Code Online (Sandbox Code Playgroud)

我可以通过这种方式移动rects而不是路径,为什么会这样,以及如何移动路径对象呢?!

javascript animation move path raphael

12
推荐指数
3
解决办法
3万
查看次数

是否有一些众所周知的算法将用户的图形转换为平滑的形状?

我的要求: 用户应该能够手工绘制一些东西.然后,在他取下笔(或手指)后,算法会平滑并将其转换为一些基本形状.

在此输入图像描述

首先,我想将绘图转换为尽可能类似于原始的矩形.(当然,如果用户故意绘制其他东西,这将不起作用.)现在我正在计算平均x和y位置,我区分水平线和垂直线.但它还不是一个矩形,而是某种正交线.

我想知道是否有一些众所周知的算法,因为我在一些触摸屏应用程序中看到过几次.你有阅读提示吗?

更新:也许模式识别算法可以帮助我.有些手机要求用户绘制图案以解锁其密钥.

PS:我认为这个问题与特定的编程语言无关,但如果你感兴趣,我将用RaphaelGWT构建一个Web应用程序.

algorithm graphics geometry raphael computational-geometry

12
推荐指数
2
解决办法
5081
查看次数

RaphaelJS库找到路径的交叉点

我想用RaphaëlJS绘制圆形交点的形状.那里有图书馆吗?一个更通用的SVG路径库可能也会工作,但我的谷歌foo让我失望.

我想绘制这样的形状:

形状

javascript graphics svg raphael

12
推荐指数
1
解决办法
800
查看次数

如何为Raphael元素添加和删除发光?

我正在尝试为raphael元素设置悬停,以便当鼠标位于元素上时,它会发光,当鼠标离开时,会消除光晕.我已经想出如何添加发光,但我无法删除它.这是我的脚本的样子:

$(document).ready(function() {
    var paper = Raphael(0,0,360,360);
    var myCircle = paper.circle(180,180,30).attr('stroke','#FFF');
    myCircle.hover(function() {
        myCircle.glow().attr('stroke','#FFF');
    }, function() {
        // removing the glow from the circle??
    });
});
Run Code Online (Sandbox Code Playgroud)

所以有效的部分是当我将鼠标悬停在圆圈上时将光晕添加到圆圈中.但是,当鼠标移离圆形元素时,我不知道如何移除光晕.你知道我怎么能从元素中消除光晕吗?

注意:body元素的背景设置为黑色(#000).

使用的库:

  • JQuery的
  • Raphael.js

javascript raphael glow

12
推荐指数
1
解决办法
1万
查看次数