svg 조작 응용 프로그램 - 녹화 및 재생 svg 조작

Question

사용자가 SVG 이미지를 가져 와서 "녹음"아래에서 조작 할 수있는 moble 응용 프로그램을 만든 다음 해당 녹음을 친구에게 보내 " 다시 하다".

나는 D3.js에 대한 경험이 있고 SVG 조작을위한 Snap.svg 라이브러리도 살펴 보았지만이를 구현하는 방법에 대해 완전히 머리를 감싸고 있지는 않습니다.

특히 사용자가 만들고있는 조작을 저장 한 다음 "재생"할 수있는 좋은 방법은 무엇입니까? 예를 들어 D3.js를 사용하여 SVG를 조작 할 수 있지만 코드 기반이기 때문에 애니메이션을 "직렬화하여"다른 사람에게 보내고 "재생"할 수는 없습니다 . 코드 생성 경로를 따라 가고 싶지 않습니다.

아이디어가 있습니까?

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>