小编Phr*_*ogz的帖子

将事件附加到SVG路径

我在带有<svg>标签的html中有一张SVG地图.我想附加事件,以便我可以点击它们并触发一些事件.我知道我可以在多边形元素上使用jQuery附加click事件.但是这个地图中的某些区域是使用路径制作的,当我点击路径内部而不是路径时,我想触发一些事件.

这样做的方法是什么?使用jQuery是首选.

javascript jquery svg

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

烘焙转换为SVG路径元素命令

tl; dr summary:给我资源或帮助修复下面的代码<path>,用任意矩阵转换SVG 元素的路径命令.

详细信息:
我正在编写一个库,将任意SVG形状转换为<path>元素.当transform="..."层次结构中没有元素时,我可以使用它,但现在我想将对象的局部变换烘焙到路径数据命令本身.

在处理简单的moveto/lineto命令时,这主要是工作(下面的代码).但是,我不确定转换贝塞尔手柄或arcTo参数的适当方法.

例如,我可以将这个圆角矩形转换为<path>:

<rect x="10" y="30" rx="10" ry="20" width="80" height="70" />
--> <path d=?"M20,30 L80,30 A10,20,0,0,1,90,50 L90,80 A10,20,0,0,1,80,100
             L20,100 A10,20,0,0,1,10,80 L10,50 A10,20,0,0,1,20,30" />
Run Code Online (Sandbox Code Playgroud)

在没有任何圆角的情况下进行转换时,我得到了有效的结果:

<rect x="10" y="30" width="80" height="70"
      transform="translate(-200,0) scale(1.5) rotate(50)" />
--> <path d=?"M10,30 L90,30 L90,100 L10,100 L10,30" />
Run Code Online (Sandbox Code Playgroud)

但是,仅转换椭圆弧命令的x/y坐标会产生有趣的结果: 圆形矩形,绿色斑点从边界外的角落渗出
虚线是实际变换后的矩形,绿色填充是我的路径.

以下是我到目前为止的代码(略微减少).我还有一个测试页面,我正在测试各种形状.请帮助我确定如何在elliptical arc给定任意变换矩阵的情况下正确转换各种其他贝塞尔曲线命令.

function flattenToPaths(el,transform,svg){
  if (!svg) svg=el; while(svg && svg.tagName!='svg') svg=svg.parentNode;
  var …
Run Code Online (Sandbox Code Playgroud)

javascript svg 2d transform

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

在HTML5 Canvas上绘制SVG并支持font元素

是否有一个很好的库,用于将SVG转换为支持字体元素的HTML画布?我已经尝试过canvg,但它不支持Font.

html5 svg canvas

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

验证值是否在某个范围内,例如1 <= val <= 2

我想验证一个数字:value在1或2之内

validates :value, :format => { :with => /1|2/, :message => "Select number.." }
Run Code Online (Sandbox Code Playgroud)

但是,上面的代码在验证时失败了 value == 1

请确保您的解决方案允许我添加验证消息.

ruby activerecord ruby-on-rails-3

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

检查数组是否已经排序?

我知道如何按顺序放置一个数组,但在这种情况下,我只是想知道它是否有序.我想,一串字符串将是最简单的,并且在这方面的答案是值得赞赏的,但是包括基于某些任意参数检查顺序的能力的答案是最佳的.

这是一个示例数据集.名称:

[["a", 3],["b",53],["c",2]]
Run Code Online (Sandbox Code Playgroud)

元素本身是包含多个元素的数组,其中第一个是字符串.我想看看这些元素是否按字母顺序排列.

ruby arrays

22
推荐指数
2
解决办法
8789
查看次数

两个时间实例之间的天数

如何确定Ruby中两个Time实例之间的天数?

> earlyTime = Time.at(123)
> laterTime = Time.now
> time_difference = laterTime - earlyTime
Run Code Online (Sandbox Code Playgroud)

我想确定天数time_difference(我不担心几天的时间.上下调整很好).

ruby time date

22
推荐指数
4
解决办法
2万
查看次数

RegEx模式任意两个字母后跟六个数字

请协助正确的RegEx匹配.任何2个字母后跟6个整数的任意组合.

These would be valid: 
RJ123456
PY654321
DD321234

These would not
DDD12345
12DDD123
Run Code Online (Sandbox Code Playgroud)

regex

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

如何在JavaScript中创建可链接的函数?

让我们想象这样的功能:

function foo(x) {
    x += '+';
    return x;
}
Run Code Online (Sandbox Code Playgroud)

使用它将是:

var x, y;
x = 'Notepad';
y = foo(x);
console.log(y); // Prints 'Notepad+'.
Run Code Online (Sandbox Code Playgroud)

我正在寻找一种方法来创建可与其他功能链接的功能.

想象一下用法:

var x, y;
x = 'Notepad';
y = x.foo().foo().toUpperCase(); // Prints 'NOTEPAD++'.
console.log(y);
Run Code Online (Sandbox Code Playgroud)

我该怎么做?

javascript return function chain chainable

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

如何使用jQuery更改textarea中的行数

我有一个5行的textarea.我想只显示一行,并且在焦点上它应显示剩余的4行.

javascript jquery textarea javascript-events

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

将MatchData中的命名匹配转换为Hash

我有一个相当简单的正则表达式,但我想使用命名正则表达式使其更清晰,然后迭代结果.

测试字符串:

testing_string = "111x222b333"
Run Code Online (Sandbox Code Playgroud)

我的正则表达式:

regexp = %r{
                (?<width> [0-9]{3} ) {0}
                (?<height> [0-9]{3} ) {0}
                (?<depth> [0-9]+ ) {0}

                \g<width>x\g<height>b\g<depth>
            }x
dimensions = regexp.match(testing_string)
Run Code Online (Sandbox Code Playgroud)

这项工作就像一个魅力,但问题来自何处:

dimensions.each { |k, v| dimensions[k] = my_operation(v) }

# ERROR !

 undefined method `each' for #<MatchData "111x222b333" width:"111" height:"222" depth:"333">.
Run Code Online (Sandbox Code Playgroud)

没有.each在MatchData对象中的方法,我真的不想修补它.

我该如何解决这个问题?

我不像我想的那么清楚:重点是保持名称和类似哈希的结构.

ruby regex hash

20
推荐指数
2
解决办法
6526
查看次数