github/scratch-render
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add stage scale slider to playground

Browse Source
This commit is contained in:
adroitwhiz 2019-03-24 02:50:11 -04:00
parent 4e9223adc6
commit 2f14126d0b
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/playground/index.html
View File

@ -3,9 +3,6 @@
<head>
<meta charset="UTF-8">
<title>Scratch WebGL rendering demo</title>
<style>
#scratch-stage { width: 480px; }
</style>
</head>
<body style="background: lightsteelblue">
<canvas id="scratch-stage" width="10" height="10" style="border:3px dashed black"></canvas>
@ -29,6 +26,10 @@
<label for="fudge">Property Value:</label>
<input type="range" id="fudge" style="width:50%" value="90" min="-90" max="270" step="any">
</p>
<p>
<label for="stage-scale">Stage scale:</label>
<input type="range" style="width:50%" id="stage-scale" value="1" min="1" max="2.5" step="any">
</p>
<p>
<label for="fudgeMin">Min:</label><input id="fudgeMin" type="number">
<label for="fudgeMax">Max:</label><input id="fudgeMax" type="number">

9
src/playground/playground.js
View File

@ -134,6 +134,15 @@ fudgeInput.addEventListener('input', handleFudgeChanged);
fudgeInput.addEventListener('change', handleFudgeChanged);
fudgeInput.addEventListener('init', handleFudgeChanged);
const stageScaleInput = document.getElementById("stage-scale");
stageScaleInput.addEventListener('input', updateStageScale);
stageScaleInput.addEventListener('change', updateStageScale);
function updateStageScale(event) {
renderer.resize(480 * event.target.valueAsNumber, 360 * event.target.valueAsNumber);
}
canvas.addEventListener('mousemove', event => {
var mousePos = getMousePosition(event, canvas);
renderer.extractColor(mousePos.x, mousePos.y, 30);