Initial commit of 001code-html Scratch frontend project.
Includes scratch-gui, scratch-vm, scratch-blocks, scratch-render, scratch-l10n, and deployment config. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
9
scratch-render/src/playground/.eslintrc.js
Normal file
9
scratch-render/src/playground/.eslintrc.js
Normal file
@@ -0,0 +1,9 @@
|
||||
module.exports = {
|
||||
extends: ['scratch'],
|
||||
env: {
|
||||
browser: true
|
||||
},
|
||||
rules: {
|
||||
'no-console': 'off'
|
||||
}
|
||||
};
|
||||
37
scratch-render/src/playground/getMousePosition.js
Normal file
37
scratch-render/src/playground/getMousePosition.js
Normal file
@@ -0,0 +1,37 @@
|
||||
// Adapted from code by Simon Sarris: http://stackoverflow.com/a/10450761
|
||||
const getMousePos = function (event, element) {
|
||||
const stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(element, null).paddingLeft, 10) || 0;
|
||||
const stylePaddingTop = parseInt(document.defaultView.getComputedStyle(element, null).paddingTop, 10) || 0;
|
||||
const styleBorderLeft = parseInt(document.defaultView.getComputedStyle(element, null).borderLeftWidth, 10) || 0;
|
||||
const styleBorderTop = parseInt(document.defaultView.getComputedStyle(element, null).borderTopWidth, 10) || 0;
|
||||
|
||||
// Some pages have fixed-position bars at the top or left of the page
|
||||
// They will mess up mouse coordinates and this fixes that
|
||||
const html = document.body.parentNode;
|
||||
const htmlTop = html.offsetTop;
|
||||
const htmlLeft = html.offsetLeft;
|
||||
|
||||
// Compute the total offset. It's possible to cache this if you want
|
||||
let offsetX = 0;
|
||||
let offsetY = 0;
|
||||
if (typeof element.offsetParent !== 'undefined') {
|
||||
do {
|
||||
offsetX += element.offsetLeft;
|
||||
offsetY += element.offsetTop;
|
||||
} while ((element = element.offsetParent));
|
||||
}
|
||||
|
||||
// Add padding and border style widths to offset
|
||||
// Also add the <html> offsets in case there's a position:fixed bar
|
||||
// This part is not strictly necessary, it depends on your styling
|
||||
offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
|
||||
offsetY += stylePaddingTop + styleBorderTop + htmlTop;
|
||||
|
||||
// We return a simple javascript object with x and y defined
|
||||
return {
|
||||
x: event.pageX - offsetX,
|
||||
y: event.pageY - offsetY
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = getMousePos;
|
||||
41
scratch-render/src/playground/index.html
Normal file
41
scratch-render/src/playground/index.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Scratch WebGL rendering demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="scratch-stage" width="10" height="10"></canvas>
|
||||
<canvas id="debug-canvas" width="10" height="10"></canvas>
|
||||
<p>
|
||||
<label for="fudgeproperty">Property to tweak:</label>
|
||||
<select id="fudgeproperty">
|
||||
<option value="posx">Position X</option>
|
||||
<option value="posy">Position Y</option>
|
||||
<option value="direction">Direction</option>
|
||||
<option value="scalex">Scale X</option>
|
||||
<option value="scaley">Scale Y</option>
|
||||
<option value="scaleboth">Scale (both dimensions)</option>
|
||||
<option value="color">Color</option>
|
||||
<option value="fisheye">Fisheye</option>
|
||||
<option value="whirl">Whirl</option>
|
||||
<option value="pixelate">Pixelate</option>
|
||||
<option value="mosaic">Mosaic</option>
|
||||
<option value="brightness">Brightness</option>
|
||||
<option value="ghost">Ghost</option>
|
||||
</select>
|
||||
<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" value="0">
|
||||
<label for="fudgeMax">Max:</label><input id="fudgeMax" type="number" value="200">
|
||||
</p>
|
||||
<script src="playground.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
202
scratch-render/src/playground/playground.js
Normal file
202
scratch-render/src/playground/playground.js
Normal file
@@ -0,0 +1,202 @@
|
||||
const ScratchRender = require('../RenderWebGL');
|
||||
const getMousePosition = require('./getMousePosition');
|
||||
|
||||
const canvas = document.getElementById('scratch-stage');
|
||||
let fudge = 90;
|
||||
const renderer = new ScratchRender(canvas);
|
||||
renderer.setLayerGroupOrdering(['group1']);
|
||||
|
||||
const drawableID = renderer.createDrawable('group1');
|
||||
renderer.updateDrawableProperties(drawableID, {
|
||||
position: [0, 0],
|
||||
scale: [100, 100],
|
||||
direction: 90
|
||||
});
|
||||
|
||||
const WantedSkinType = {
|
||||
bitmap: 'bitmap',
|
||||
vector: 'vector',
|
||||
pen: 'pen'
|
||||
};
|
||||
|
||||
const drawableID2 = renderer.createDrawable('group1');
|
||||
const wantedSkin = WantedSkinType.vector;
|
||||
|
||||
// Bitmap (squirrel)
|
||||
const image = new Image();
|
||||
image.addEventListener('load', () => {
|
||||
const bitmapSkinId = renderer.createBitmapSkin(image);
|
||||
if (wantedSkin === WantedSkinType.bitmap) {
|
||||
renderer.updateDrawableProperties(drawableID2, {
|
||||
skinId: bitmapSkinId
|
||||
});
|
||||
}
|
||||
});
|
||||
image.crossOrigin = 'anonymous';
|
||||
image.src = 'https://cdn.assets.scratch.mit.edu/internalapi/asset/7e24c99c1b853e52f8e7f9004416fa34.png/get/';
|
||||
|
||||
// SVG (cat 1-a)
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.addEventListener('load', () => {
|
||||
const skinId = renderer.createSVGSkin(xhr.responseText);
|
||||
if (wantedSkin === WantedSkinType.vector) {
|
||||
renderer.updateDrawableProperties(drawableID2, {
|
||||
skinId: skinId
|
||||
});
|
||||
}
|
||||
});
|
||||
xhr.open('GET', 'https://cdn.assets.scratch.mit.edu/internalapi/asset/b7853f557e4426412e64bb3da6531a99.svg/get/');
|
||||
xhr.send();
|
||||
|
||||
if (wantedSkin === WantedSkinType.pen) {
|
||||
const penSkinID = renderer.createPenSkin();
|
||||
|
||||
renderer.updateDrawableProperties(drawableID2, {
|
||||
skinId: penSkinID
|
||||
});
|
||||
|
||||
canvas.addEventListener('click', event => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
|
||||
const x = event.clientX - rect.left;
|
||||
const y = event.clientY - rect.top;
|
||||
|
||||
renderer.penLine(penSkinID, {
|
||||
color4f: [Math.random(), Math.random(), Math.random(), 1],
|
||||
diameter: 8
|
||||
},
|
||||
x - 240, 180 - y, (Math.random() * 480) - 240, (Math.random() * 360) - 180);
|
||||
});
|
||||
}
|
||||
|
||||
let posX = 0;
|
||||
let posY = 0;
|
||||
let scaleX = 100;
|
||||
let scaleY = 100;
|
||||
let fudgeProperty = 'posx';
|
||||
|
||||
const fudgeInput = document.getElementById('fudge');
|
||||
const fudgePropertyInput = document.getElementById('fudgeproperty');
|
||||
const fudgeMinInput = document.getElementById('fudgeMin');
|
||||
const fudgeMaxInput = document.getElementById('fudgeMax');
|
||||
|
||||
/* eslint require-jsdoc: 0 */
|
||||
const updateFudgeProperty = event => {
|
||||
fudgeProperty = event.target.value;
|
||||
};
|
||||
|
||||
const updateFudgeMin = event => {
|
||||
fudgeInput.min = event.target.valueAsNumber;
|
||||
};
|
||||
|
||||
const updateFudgeMax = event => {
|
||||
fudgeInput.max = event.target.valueAsNumber;
|
||||
};
|
||||
|
||||
fudgePropertyInput.addEventListener('change', updateFudgeProperty);
|
||||
fudgePropertyInput.addEventListener('init', updateFudgeProperty);
|
||||
|
||||
fudgeMinInput.addEventListener('change', updateFudgeMin);
|
||||
fudgeMinInput.addEventListener('init', updateFudgeMin);
|
||||
|
||||
fudgeMaxInput.addEventListener('change', updateFudgeMax);
|
||||
fudgeMaxInput.addEventListener('init', updateFudgeMax);
|
||||
|
||||
// Ugly hack to properly set the values of the inputs on page load,
|
||||
// since they persist across reloads, at least in Firefox.
|
||||
// The best ugly hacks are the ones that reduce code duplication!
|
||||
fudgePropertyInput.dispatchEvent(new CustomEvent('init'));
|
||||
fudgeMinInput.dispatchEvent(new CustomEvent('init'));
|
||||
fudgeMaxInput.dispatchEvent(new CustomEvent('init'));
|
||||
fudgeInput.dispatchEvent(new CustomEvent('init'));
|
||||
|
||||
const handleFudgeChanged = function (event) {
|
||||
fudge = event.target.valueAsNumber;
|
||||
const props = {};
|
||||
switch (fudgeProperty) {
|
||||
case 'posx':
|
||||
props.position = [fudge, posY];
|
||||
posX = fudge;
|
||||
break;
|
||||
case 'posy':
|
||||
props.position = [posX, fudge];
|
||||
posY = fudge;
|
||||
break;
|
||||
case 'direction':
|
||||
props.direction = fudge;
|
||||
break;
|
||||
case 'scalex':
|
||||
props.scale = [fudge, scaleY];
|
||||
scaleX = fudge;
|
||||
break;
|
||||
case 'scaley':
|
||||
props.scale = [scaleX, fudge];
|
||||
scaleY = fudge;
|
||||
break;
|
||||
case 'scaleboth':
|
||||
props.scale = [fudge, fudge];
|
||||
scaleX = fudge;
|
||||
scaleY = fudge;
|
||||
break;
|
||||
case 'color':
|
||||
props.color = fudge;
|
||||
break;
|
||||
case 'whirl':
|
||||
props.whirl = fudge;
|
||||
break;
|
||||
case 'fisheye':
|
||||
props.fisheye = fudge;
|
||||
break;
|
||||
case 'pixelate':
|
||||
props.pixelate = fudge;
|
||||
break;
|
||||
case 'mosaic':
|
||||
props.mosaic = fudge;
|
||||
break;
|
||||
case 'brightness':
|
||||
props.brightness = fudge;
|
||||
break;
|
||||
case 'ghost':
|
||||
props.ghost = fudge;
|
||||
break;
|
||||
}
|
||||
renderer.updateDrawableProperties(drawableID2, props);
|
||||
};
|
||||
|
||||
fudgeInput.addEventListener('input', handleFudgeChanged);
|
||||
fudgeInput.addEventListener('change', handleFudgeChanged);
|
||||
fudgeInput.addEventListener('init', handleFudgeChanged);
|
||||
|
||||
const updateStageScale = event => {
|
||||
renderer.resize(480 * event.target.valueAsNumber, 360 * event.target.valueAsNumber);
|
||||
};
|
||||
|
||||
const stageScaleInput = document.getElementById('stage-scale');
|
||||
|
||||
stageScaleInput.addEventListener('input', updateStageScale);
|
||||
stageScaleInput.addEventListener('change', updateStageScale);
|
||||
|
||||
canvas.addEventListener('mousemove', event => {
|
||||
const mousePos = getMousePosition(event, canvas);
|
||||
renderer.extractColor(mousePos.x, mousePos.y, 30);
|
||||
});
|
||||
|
||||
canvas.addEventListener('click', event => {
|
||||
const mousePos = getMousePosition(event, canvas);
|
||||
const pickID = renderer.pick(mousePos.x, mousePos.y);
|
||||
console.log(`You clicked on ${(pickID < 0 ? 'nothing' : `ID# ${pickID}`)}`);
|
||||
if (pickID >= 0) {
|
||||
console.dir(renderer.extractDrawableScreenSpace(pickID, mousePos.x, mousePos.y));
|
||||
}
|
||||
});
|
||||
|
||||
const drawStep = function () {
|
||||
renderer.draw();
|
||||
// renderer.getBounds(drawableID2);
|
||||
// renderer.isTouchingColor(drawableID2, [255,255,255]);
|
||||
requestAnimationFrame(drawStep);
|
||||
};
|
||||
drawStep();
|
||||
|
||||
const debugCanvas = /** @type {canvas} */ document.getElementById('debug-canvas');
|
||||
renderer.setDebugCanvas(debugCanvas);
|
||||
73
scratch-render/src/playground/queryPlayground.html
Normal file
73
scratch-render/src/playground/queryPlayground.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Scratch WebGL Query Playground</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<style>
|
||||
input[type=range][orient=vertical] {
|
||||
writing-mode: bt-lr; /* IE */
|
||||
-webkit-appearance: slider-vertical;
|
||||
width: 1rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
canvas {
|
||||
/* https://stackoverflow.com/a/7665647 */
|
||||
image-rendering: optimizeSpeed; /* Older versions of FF */
|
||||
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
|
||||
image-rendering: -webkit-optimize-contrast; /* Safari */
|
||||
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
|
||||
image-rendering: pixelated; /* Awesome future-browsers */
|
||||
-ms-interpolation-mode: nearest-neighbor; /* IE */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<fieldset>
|
||||
<legend>Query Canvases</legend>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<fieldset>
|
||||
<legend>GPU</legend>
|
||||
<div>Touching color A? <span id="gpuTouchingA">maybe</span></div>
|
||||
<div>Touching color B? <span id="gpuTouchingB">maybe</span></div>
|
||||
<canvas id="gpuQueryCanvas" width="480" height="360" style="height: 20rem"></canvas>
|
||||
</fieldset>
|
||||
</td>
|
||||
<td>
|
||||
<fieldset>
|
||||
<legend>CPU</legend>
|
||||
<div>Touching color A? <span id="cpuTouchingA">maybe</span></div>
|
||||
<div>Touching color B? <span id="cpuTouchingB">maybe</span></div>
|
||||
<canvas id="cpuQueryCanvas" width="480" height="360" style="height: 20rem"></canvas>
|
||||
</fieldset>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Render Canvas</legend>
|
||||
<div>Cursor Position: <span id="cursorPosition">somewhere</span></div>
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input id="cursorX" type="range" step="0.25" value="0" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input id="cursorY" type="range" orient="vertical" step="0.25" value="0" />
|
||||
</td>
|
||||
<td>
|
||||
<canvas id="renderCanvas" width="480" height="360"></canvas>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</fieldset>
|
||||
</div>
|
||||
</body>
|
||||
<script src="queryPlayground.js"></script>
|
||||
</html>
|
||||
196
scratch-render/src/playground/queryPlayground.js
Normal file
196
scratch-render/src/playground/queryPlayground.js
Normal file
@@ -0,0 +1,196 @@
|
||||
const ScratchRender = require('../RenderWebGL');
|
||||
const getMousePosition = require('./getMousePosition');
|
||||
|
||||
const renderCanvas = document.getElementById('renderCanvas');
|
||||
const gpuQueryCanvas = document.getElementById('gpuQueryCanvas');
|
||||
const cpuQueryCanvas = document.getElementById('cpuQueryCanvas');
|
||||
const inputCursorX = document.getElementById('cursorX');
|
||||
const inputCursorY = document.getElementById('cursorY');
|
||||
const labelCursorPosition = document.getElementById('cursorPosition');
|
||||
const labelGpuTouchingA = document.getElementById('gpuTouchingA');
|
||||
const labelGpuTouchingB = document.getElementById('gpuTouchingB');
|
||||
const labelCpuTouchingA = document.getElementById('cpuTouchingA');
|
||||
const labelCpuTouchingB = document.getElementById('cpuTouchingB');
|
||||
|
||||
const drawables = {
|
||||
testPattern: -1,
|
||||
cursor: -1
|
||||
};
|
||||
|
||||
const colors = {
|
||||
cursor: [255, 0, 0],
|
||||
patternA: [0, 255, 0],
|
||||
patternB: [0, 0, 255]
|
||||
};
|
||||
|
||||
const renderer = new ScratchRender(renderCanvas);
|
||||
|
||||
const handleResizeRenderCanvas = () => {
|
||||
const halfWidth = renderCanvas.clientWidth / 2;
|
||||
const halfHeight = renderCanvas.clientHeight / 2;
|
||||
|
||||
inputCursorX.style.width = `${renderCanvas.clientWidth}px`;
|
||||
inputCursorY.style.height = `${renderCanvas.clientHeight}px`;
|
||||
inputCursorX.min = -halfWidth;
|
||||
inputCursorX.max = halfWidth;
|
||||
inputCursorY.min = -halfHeight;
|
||||
inputCursorY.max = halfHeight;
|
||||
};
|
||||
renderCanvas.addEventListener('resize', handleResizeRenderCanvas);
|
||||
handleResizeRenderCanvas();
|
||||
|
||||
const handleCursorPositionChanged = () => {
|
||||
const devicePixelRatio = window.devicePixelRatio || 1;
|
||||
const cursorX = inputCursorX.valueAsNumber / devicePixelRatio;
|
||||
const cursorY = inputCursorY.valueAsNumber / devicePixelRatio;
|
||||
const positionHTML = `${cursorX}, ${cursorY}`;
|
||||
labelCursorPosition.innerHTML = positionHTML;
|
||||
if (drawables.cursor >= 0) {
|
||||
renderer.draw();
|
||||
renderer.updateDrawableProperties(drawables.cursor, {
|
||||
position: [cursorX, cursorY]
|
||||
});
|
||||
|
||||
renderer.setUseGpuMode(ScratchRender.UseGpuModes.ForceGPU);
|
||||
renderer.setDebugCanvas(gpuQueryCanvas);
|
||||
const isGpuTouchingA = renderer.isTouchingColor(drawables.cursor, colors.patternA);
|
||||
const isGpuTouchingB = renderer.isTouchingColor(drawables.cursor, colors.patternB);
|
||||
labelGpuTouchingA.innerHTML = isGpuTouchingA ? 'yes' : 'no';
|
||||
labelGpuTouchingB.innerHTML = isGpuTouchingB ? 'yes' : 'no';
|
||||
|
||||
renderer.setUseGpuMode(ScratchRender.UseGpuModes.ForceCPU);
|
||||
renderer.setDebugCanvas(cpuQueryCanvas);
|
||||
const isCpuTouchingA = renderer.isTouchingColor(drawables.cursor, colors.patternA);
|
||||
const isCpuTouchingB = renderer.isTouchingColor(drawables.cursor, colors.patternB);
|
||||
labelCpuTouchingA.innerHTML = isCpuTouchingA ? 'yes' : 'no';
|
||||
labelCpuTouchingB.innerHTML = isCpuTouchingB ? 'yes' : 'no';
|
||||
|
||||
renderer.setUseGpuMode(ScratchRender.UseGpuModes.Automatic);
|
||||
}
|
||||
};
|
||||
inputCursorX.addEventListener('change', handleCursorPositionChanged);
|
||||
inputCursorY.addEventListener('change', handleCursorPositionChanged);
|
||||
inputCursorX.addEventListener('input', handleCursorPositionChanged);
|
||||
inputCursorY.addEventListener('input', handleCursorPositionChanged);
|
||||
handleCursorPositionChanged();
|
||||
|
||||
let trackingMouse = true;
|
||||
const handleMouseMove = event => {
|
||||
if (trackingMouse) {
|
||||
const mousePosition = getMousePosition(event, renderCanvas);
|
||||
inputCursorX.value = mousePosition.x - (renderCanvas.clientWidth / 2);
|
||||
inputCursorY.value = (renderCanvas.clientHeight / 2) - mousePosition.y;
|
||||
handleCursorPositionChanged();
|
||||
}
|
||||
};
|
||||
renderCanvas.addEventListener('mousemove', handleMouseMove);
|
||||
|
||||
renderCanvas.addEventListener('click', event => {
|
||||
trackingMouse = !trackingMouse;
|
||||
if (trackingMouse) {
|
||||
handleMouseMove(event);
|
||||
}
|
||||
});
|
||||
|
||||
const rgb2fillStyle = rgb => (
|
||||
`rgb(${rgb[0]},${rgb[1]},${rgb[2]})`
|
||||
);
|
||||
|
||||
const makeCursorImage = () => {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = canvas.height = 1;
|
||||
|
||||
const context = canvas.getContext('2d');
|
||||
context.fillStyle = rgb2fillStyle(colors.cursor);
|
||||
context.fillRect(0, 0, 1, 1);
|
||||
|
||||
return canvas;
|
||||
};
|
||||
|
||||
const makeTestPatternImage = () => {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 480;
|
||||
canvas.height = 360;
|
||||
|
||||
const patternA = rgb2fillStyle(colors.patternA);
|
||||
const patternB = rgb2fillStyle(colors.patternB);
|
||||
|
||||
const context = canvas.getContext('2d');
|
||||
context.fillStyle = patternA;
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
context.fillStyle = patternB;
|
||||
const xSplit1 = Math.floor(canvas.width * 0.25);
|
||||
const xSplit2 = Math.floor(canvas.width * 0.5);
|
||||
const xSplit3 = Math.floor(canvas.width * 0.75);
|
||||
const ySplit = Math.floor(canvas.height * 0.5);
|
||||
for (let y = 0; y < ySplit; y += 2) {
|
||||
context.fillRect(0, y, xSplit2, 1);
|
||||
}
|
||||
for (let x = xSplit2; x < canvas.width; x += 2) {
|
||||
context.fillRect(x, 0, 1, ySplit);
|
||||
}
|
||||
for (let x = 0; x < xSplit1; x += 2) {
|
||||
for (let y = ySplit; y < canvas.height; y += 2) {
|
||||
context.fillRect(x, y, 1, 1);
|
||||
}
|
||||
}
|
||||
for (let x = xSplit1; x < xSplit2; x += 3) {
|
||||
for (let y = ySplit; y < canvas.height; y += 3) {
|
||||
context.fillRect(x, y, 2, 2);
|
||||
}
|
||||
}
|
||||
for (let x = xSplit2; x < xSplit3; ++x) {
|
||||
for (let y = ySplit; y < canvas.height; ++y) {
|
||||
context.fillStyle = (x + y) % 2 ? patternB : patternA;
|
||||
context.fillRect(x, y, 1, 1);
|
||||
}
|
||||
}
|
||||
for (let x = xSplit3; x < canvas.width; x += 2) {
|
||||
for (let y = ySplit; y < canvas.height; y += 2) {
|
||||
context.fillStyle = (x + y) % 4 ? patternB : patternA;
|
||||
context.fillRect(x, y, 2, 2);
|
||||
}
|
||||
}
|
||||
|
||||
return canvas;
|
||||
};
|
||||
|
||||
const makeTestPatternDrawable = function (group) {
|
||||
const image = makeTestPatternImage();
|
||||
const skinId = renderer.createBitmapSkin(image, 1);
|
||||
const drawableId = renderer.createDrawable(group);
|
||||
renderer.updateDrawableProperties(drawableId, {skinId});
|
||||
return drawableId;
|
||||
};
|
||||
|
||||
const makeCursorDrawable = function (group) {
|
||||
const image = makeCursorImage();
|
||||
const skinId = renderer.createBitmapSkin(image, 1, [0, 0]);
|
||||
const drawableId = renderer.createDrawable(group);
|
||||
renderer.updateDrawableProperties(drawableId, {skinId});
|
||||
return drawableId;
|
||||
};
|
||||
|
||||
const initRendering = () => {
|
||||
const layerGroup = {
|
||||
testPattern: 'testPattern',
|
||||
cursor: 'cursor'
|
||||
};
|
||||
renderer.setLayerGroupOrdering([layerGroup.testPattern, layerGroup.cursor]);
|
||||
drawables.testPattern = makeTestPatternDrawable(layerGroup.testPattern);
|
||||
drawables.cursor = makeCursorDrawable(layerGroup.cursor);
|
||||
|
||||
const corner00 = makeCursorDrawable(layerGroup.cursor);
|
||||
const corner01 = makeCursorDrawable(layerGroup.cursor);
|
||||
const corner10 = makeCursorDrawable(layerGroup.cursor);
|
||||
const corner11 = makeCursorDrawable(layerGroup.cursor);
|
||||
|
||||
renderer.updateDrawableProperties(corner00, {position: [-240, -179]});
|
||||
renderer.updateDrawableProperties(corner01, {position: [-240, 180]});
|
||||
renderer.updateDrawableProperties(corner10, {position: [239, -179]});
|
||||
renderer.updateDrawableProperties(corner11, {position: [239, 180]});
|
||||
};
|
||||
|
||||
initRendering();
|
||||
renderer.draw();
|
||||
11
scratch-render/src/playground/style.css
Normal file
11
scratch-render/src/playground/style.css
Normal file
@@ -0,0 +1,11 @@
|
||||
body {
|
||||
background: lightsteelblue;
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 3px dashed black;
|
||||
}
|
||||
|
||||
#debug-canvas {
|
||||
border-color: red;
|
||||
}
|
||||
Reference in New Issue
Block a user