scratch-svg-renderer
Version:
SVG renderer for Scratch
133 lines (115 loc) • 4.16 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scratch SVG rendering playground</title>
<style>
.result {
background-color:gray;
}
#reference {
display:inline-block;
font-size:0;
}
.column {
display:inline-block;
}
</style>
</head>
<body>
<p>
<input type="file" id="svg-file-upload", accept="image/svg+xml">
</p>
<p>
<label for="render-scale">Scale:</label>
<input type="range" style="width:50%;" id="render-scale" value="1" min="0.5" max="3" step="any">
<label for="render-scale" id="scale-display"></label>
</p>
<p>
<input type="button" id="trigger-render" value="Render">
<label for="shouldRenderReference">
<input type="checkbox" id="shouldRenderReference" checked />
Render Reference?
</label>
</p>
<div class="columns">
<div class="column">
<div>Rendered Result</div>
<canvas id="render-canvas" class="result"></canvas>
</div>
<div class="column">
<div>Reference</div>
<span id="reference"></span>
</div>
</div>
<div class="columns">
<div class="column">
<div>Rendered Content</div>
<textarea id="renderedContent" wrap="off" cols="50" rows="50"></textarea>
</div>
<div class="column">
<div>Reference</div>
<span id="reference"></span>
<textarea id="referenceContent" wrap="off" cols="50" rows="50"></textarea>
</div>
</div>
<script src="scratch-svg-renderer.js"></script>
<script>
const renderCanvas = document.getElementById("render-canvas");
const referenceImage = document.getElementById("reference");
const fileChooser = document.getElementById("svg-file-upload");
const scaleSlider = document.getElementById("render-scale");
const scaleDisplay = document.getElementById("scale-display");
const renderButton = document.getElementById("trigger-render");
const renderer = new ScratchSVGRenderer.SVGRenderer(renderCanvas);
let loadedSVGString = "";
if (fileChooser.value) {
loadSVGString();
}
function renderSVGString() {
if (renderer.loaded) {
renderer.draw(parseFloat(scaleSlider.value));
}
renderedContent.value = renderer.toString(true);
}
function updateReferenceImage() {
referenceImage.innerHTML = loadedSVGString;
scalePercent = (parseFloat(scaleSlider.value) * 100) + "%"
referenceSVG = referenceImage.children[0];
referenceSVG.style.width = referenceSVG.style.height = scalePercent;
referenceSVG.classList.add("result");
}
function readFileAsText(file) {
return new Promise((res, rej) => {
const reader = new FileReader();
reader.onload = function(event) {
res(reader.result);
}
reader.onerror = console.log;
reader.readAsText(file);
})
}
function loadSVGString() {
readFileAsText(fileChooser.files[0]).then(str => {
loadedSVGString = str;
renderer.loadSVG(str, false);
})
}
function renderLoadedString() {
renderSVGString();
referenceContent.value = loadedSVGString;
shouldRenderReference.checked && updateReferenceImage();
}
function scaleSliderChanged() {
renderLoadedString();
scaleDisplay.innerText = scaleSlider.value;
}
fileChooser.addEventListener("change", loadSVGString);
scaleSlider.addEventListener("change", scaleSliderChanged);
scaleSlider.addEventListener("input", scaleSliderChanged);
renderButton.addEventListener("click", (event => {
renderLoadedString();
}));
</script>
</body>
</html>