小编Ben*_*Ben的帖子

这可能只是一个语法错误,但我找不到任何关于这种用法的详尽参考.Chrome正在重击我的背景资产,所以我显然冒犯了一些东西.

http://jsfiddle.net/YbA39/2/

我希望红色框(svg css背景)中的内容像html中的内联svg一样呈现.简单吧？

不要说不能做!我的灵感是这样的:http://jsfiddle.net/estelle/SJjJb/

作为练习,我使用RGB和十六进制创建颜色值的输入.

HTML:

<form ng-controller="myCtrl">
    R:<input ng-model="rChannel" type="number" min="0" max="255" required></input>
    G:<input ng-model="gChannel" type="number" min="0" max="255" required></input>
    B:<input ng-model="bChannel" type="number" min="0" max="255" required></input>

    hex: #<input ng-model="hexColor" type="text" required></input>
</form>

JS:

function myCtrl($scope) {
    $scope.$watch('[rChannel, gChannel, bChannel]',
              function() {
                $scope.hexColor = rgbToHex($scope.rChannel, $scope.gChannel, $scope.bChannel)
              },
              true);

    $scope.$watch('hexColor',
              function() {
                var rgbArr = hexToRgbArray($scope.hexColor);
                $scope.rChannel =  rgbArr[0];
                $scope.gChannel =  rgbArr[1];
                $scope.bChannel =  rgbArr[2];
              });
}

http://jsfiddle.net/F545z/

它有效......有一个大的打嗝.任何一个输入值无效的时刻(空字符串,或十六进制少于六个字符),所有输入都会消失!这具有删除用户已经输入的值的效果.例如,当用户键入有效的6个字符的十六进制值,然后按下删除键以更正十六进制的最后一个字符时,整个十六进制值消失,需要完全重新输入.如果您在控制台中观看,您可以看到正在发生的事情.我认为当十六进制无效时rgb输入消失是正确的行为,但它明显妨碍用户删除他/她在打字过程中的值.

这显然是因为"双重绑定" - rgb和hex值正在观察他们自己的模型,但也是彼此.这里有一些严重的无限循环潜力,它可能只是起作用,因为角度文档说循环只运行10次以防止无限循环死锁.

我很确定我这样做是错误的.我应该尝试为十六进制输入编写单独的指令吗？如果是这样,我该如何将它们全部链接起来？$ watch对于这种用途是否合法？工作小提琴最有帮助.

我正在使用 SVG 过滤器在一些复杂的路径上创建模糊的“投影”类型效果。

<defs>
    <filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feColorMatrix result="hueOut" in="SourceAlpha" type="hueRotate" values="340"/>
        <feColorMatrix result="satOut" in="hueOut" type="saturate" values="3"/>
        <feGaussianBlur in="satOut" stdDeviation="8"/> 
        <feMerge> 
           <feMergeNode/>
           <feMergeNode in="SourceGraphic"/> 
        </feMerge>
    </filter>
</defs>

我feColorMatrix纯粹是通过反复试验得出上述值。（如果我单独使用矩阵数学，我永远不会想出从暗到亮的特别美丽的色调转变。）基本上，我将色轮旋转 340 度，然后使色轮饱和颜色使用值 3，就在模糊它之前。（规范过去对此有些不清楚，但反复试验表明，大于 1 的值type="saturate"会使图像饱和，而小于 1 的值会使图像去饱和。）

问题是：我在大量路径上进行迭代，而双矩阵运算使我的机器慢下来。它经常崩溃。

某些矩阵数学大师能否帮我算出数字，以便将上面的两个 feColorMatrix 过滤器组合成一个更高效feColorMatrix的 type="matrix" 过滤器基元？我明白了规范的要点，但我在数学方面不知所措。

我想沿着弯曲的路径为一条路径(实际上是一组路径,但我会达到这个路径)设置动画.

RaphaelJS 2删除了这个animateAlong方法,原因是我无法辨别.深入了解由Zevan抽象的Raphael文档的齿轮演示,我已经做到了这一点:

//adding a custom attribute to Raphael
(function() {
  Raphael.fn.addGuides = function() {
    this.ca.guide = function(g) {
      return {
        guide: g
      };
    };
    this.ca.along = function(percent) {
      var g = this.attr("guide");
      var len = g.getTotalLength();
      var point = g.getPointAtLength(percent * len);
      var t = {
        transform: "t" + [point.x, point.y]
      };
      return t;
    };
  };
})();

var paper = Raphael("container", 600, 600);

paper.addGuides();

// the paths
var circ1 = paper.circle(50, …

我第一次玩弄ES6模块,尝试与Webpack进行基本的捆绑.我想使用Babel 6(目前最新和最好的)在Webpack加载器中进行转换.我已经读过这个以及这个和这个.

package.json包括:

 "devDependencies": {
    "babel": "~6.0.12",
    "babel-core": "~6.0.12",
    "babel-loader": "~6.0.0",
    "babel-preset-es2015": "^6.0.14",
    "grunt": "~0.4.5",
    "grunt-webpack": "^1.0.11",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.1"
  },

文件结构:

myproject
??? js
?   ??? es6
?   ?   ??? app.js
?   ?   ??? lib
?   ?   ?   ??? lib1.js
?   ?   ?   ??? lib2.js
?   ?   ??? modules
?   ?       ??? _myModule.js
??? node_modules
??? index.html
??? gruntfile.js

gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        webpack: {
            options: {
                entry: …