import scrawl from '../source/scrawl.js';Determine the displayed shape of the visible canvas; react to changes in the displayed shape
import scrawl from '../source/scrawl.js';const canvas = scrawl.library.canvas.mycanvas;
canvas.set({
isComponent: true,
checkForResize: true,
}).setAsCurrentCanvas();Create the demo Phrase entity
const mytext = scrawl.makePhrase({
name: 'display-shape-text',
start: ['center', 'center'],
handle: ['center', 'center'],
text: `Canvas display shape: undetermined`,
size: '40px',
justify: 'center',
fillStyle: 'black',
});Scrawl-canvas recognises five shapes, separated by four breakpoints:
bannerlandscaperectangleportraitskyscraperThe values assigned to the breakpoints are Float numbers for the displayed Canvas element’s width/height ratio - the value 3 represents the case where the width value is three times more than the height value, while 0.35 represents a width (roughly) 3 times less than the height.
We can set a Canvas artefact’s breakpoints in one go using the dedicated setDisplayShapeBreakpoints() function, as below. Alternatively we can use the regular set() function, supplying the attributes breakToBanner, breakToLandscape, breakToPortrait and breakToSkyscraper as required. The values given here are the default values for Canvas artefacts.
Similar functionality exists to adjust to the current (base) Cell area (width * height)
canvas.setDisplayShapeBreakpoints({
breakToBanner: 3,
breakToLandscape: 1.5,
breakToPortrait: 0.65,
breakToSkyscraper: 0.35,
breakToSmallest: 100000,
breakToSmaller: 150000,
breakToLarger: 200000,
breakToLargest: 300000,
});Each display shape has an associated hook function (by default a function that does nothing) which Scrawl-canvas will run each time it detects that the Canvas display shape has changed to that shape. We can replace these null-functions with our own; this allows us to configure the scene/animation to accommodate different display shapes, thus making the code reusable in a range of different web page environments.
We can set/update these functions at any time using the normal set() function:
canvas.set({
actionBannerShape: () => {
mytext.set({
text: `Canvas display shape: ${canvas.get('displayShape')}`,
roll: 0,
});
},
actionRectangleShape: () => {
mytext.set({
text: `Canvas display shape: ${canvas.get('displayShape')}`,
roll: -45,
});
},
actionSkyscraperShape: () => {
mytext.set({
text: `Canvas display shape: ${canvas.get('displayShape')}`,
roll: -90,
});
},
actionLargestArea: () => {
mytext.set({
size: '40px',
});
},
actionRegularArea: () => {
mytext.set({
size: '28px',
});
},
actionSmallestArea: () => {
mytext.set({
size: '16px',
});
},
});We can also set/update the functions using dedicated setAction???Shape() functions:
canvas.setActionPortraitShape(() => {
mytext.set({
text: `Canvas display shape: ${canvas.get('displayShape')}`,
roll: -67.5,
});
});
canvas.setActionLandscapeShape(() => {
mytext.set({
text: `Canvas display shape: ${canvas.get('displayShape')}`,
roll: -22.5,
});
});
canvas.setActionLargerArea(() => {
mytext.set({
size: '34px',
});
});
canvas.setActionSmallerArea(() => {
mytext.set({
size: '22px',
});
});Function to display frames-per-second data, and other information relevant to the demo
let report = function () {
let testTicker = Date.now(),
testTime, testNow,
testMessage = document.querySelector('#reportmessage');
return function () {
testNow = Date.now();
testTime = testNow - testTicker;
testTicker = testNow;
testMessage.textContent = `Screen refresh: ${Math.ceil(testTime)}ms; fps: ${Math.floor(1000 / testTime)}`;
};
}();Create the Display cycle animation
const demoAnimation = scrawl.makeRender({
name: "demo-animation",
target: canvas,
afterShow: report,We manually trigger the display shape functionality after the first render cycle completes. This allows all artefacts to settle into a state where we can then update the Phrase entity with text and roll values appropriate to the Canvas element’s initial shape
afterCreated: () => canvas.updateDisplay(),
});console.log(scrawl.library);