SVG操作アプリ - 記録と再生するSVG操作

Question

私は、ユーザーがSVG画像を取ることができmobleアプリを構築する「記録」の下にそれを操作して、「への彼らのために友人に録画を送信するために探していますリプレイ "。

私はD3.jsといくつかの経験があり、また、SVGの操作のためSnap.svgライブラリを見てきましたが、私は完全にこれを実装する方法のまわりで私の頭をラップではありませんよ。

特に

、ユーザーが行っている操作を保存し、それらを「再生」することができるようにする良い方法は何ですか？例えば、私はSVGを操作するためにD3.jsを使用することができますが、これは、コードベースであるため、私は正確に他の誰かに送信するために、彼らはそれを「再生」できるようにするために、アニメーションを「シリアライズ」することはできません。私は、コード生成のルートを下りたくない。

これを行う方法は？

Answer 1

アプリケーションのターゲットがどれほど複雑かわかりません。しかし、SVG内の更新をJSON配列としてシリアル化し、d3を使用してそれらを再生するのは簡単です。同じものの小さな例がここにあります。ステップ

：

1. 更新SVGの更新ボタンを使用します。
2. クリアボタンをクリックすることで、チャートを元に戻します。
3. 今、最後の更新を再生する再生ボタンをクリックしてください。

var defaults = [{ 
 
    key: "r", 
 
    val: 15, 
 
    type: "attr" 
 
}, { 
 
    key: "fill", 
 
    val: "blue", 
 
    type: "style" 
 
}]; 
 
var updates = []; 
 
var c20 = d3.scale.category20(); 
 
var circles = d3.selectAll("circle"); 
 

 
d3.select("#increase_rad") 
 
    .on("click", function() { 
 
    var val = parseInt(d3.select("circle").attr("r")) + 1; 
 
    circles.attr("r", val); 
 
    updates.push({ 
 
     "key": "r", 
 
     "val": val, 
 
     "type": "attr" 
 
    }); 
 
    enableButton(); 
 
    }); 
 

 
d3.select("#decrease_rad") 
 
    .on("click", function() { 
 
    var val = parseInt(d3.select("circle").attr("r")) - 1; 
 
    circles.attr("r", val); 
 
    updates.push({ 
 
     "key": "r", 
 
     "val": val, 
 
     "type": "attr" 
 
    }); 
 
    enableButton(); 
 
    }); 
 

 
d3.select("#change_color") 
 
    .on("click", function() { 
 
    var val = c20(Math.floor(Math.random() * (18) + 1)); 
 
    circles.style("fill", val); 
 
    updates.push({ 
 
     "key": "fill", 
 
     "val": val, 
 
     "type": "style" 
 
    }); 
 
    enableButton(); 
 
    }); 
 

 
d3.select("#clear") 
 
    .on("click", function() { 
 
    applyEffects(defaults); 
 
    }); 
 
d3.select("#play") 
 
    .on("click", function() { 
 
    applyEffects(updates); 
 
    }); 
 

 
function applyEffects(effects, delay) { 
 
    var trans = circles.transition() 
 
    effects.forEach(function(update) { 
 
    if (update.type == "attr") { 
 
     trans = trans.attr(update.key, update.val).transition(); 
 
    } else { 
 
     trans = trans.style(update.key, update.val).transition(); 
 
    } 
 
    }); 
 
} 
 

 
function enableButton() { 
 
    d3.select("#clear").attr("disabled", null); 
 
    d3.select("#play").attr("disabled", null); 
 
}

svg { 
 
    background: white; 
 
} 
 
.link { 
 
    stroke: black; 
 
} 
 
.node { 
 
    fill: blue; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div> 
 
    <input type="button" value="Clear" id="clear" disabled /> 
 
    <input type="button" value="Play" id="play" disabled /> 
 
    <br/> 
 
    <br/> 
 
    <input type="button" value="Increase Radius" id="increase_rad" /> 
 
    <input type="button" value="Decrease Radius" id="decrease_rad" /> 
 
    <input type="button" value="Change Color" id="change_color" /> 
 
</div> 
 
<svg width="250" height="250"> 
 
    <g id="links"> 
 
    <line class="link" x1="138.0538594815113" y1="55.927846328346924" x2="58.77306466322782" y2="110.43892621419347"></line> 
 
    <line class="link" x1="138.0538594815113" y1="55.927846328346924" x2="195.04044384802015" y2="133.44259356292176"></line> 
 
    </g> 
 
    <g id="nodes"> 
 
    <g class="node" transform="translate(138.0538594815113,55.927846328346924)"> 
 
     <circle r=15></circle> 
 
    </g> 
 
    <g class="node" transform="translate(58.77306466322782,110.43892621419347)"> 
 
     <circle r=15></circle> 
 
    </g> 
 
    <g class="node" transform="translate(195.04044384802015,133.44259356292176)"> 
 
     <circle r=15></circle> 
 
    </g> 
 
    </g> 
 
</svg>