import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';Determine the displayed shape of the visible canvas; react to changes in the displayed shape
import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';const canvas = scrawl.findCanvas('mycanvas');Namespacing boilerplate
const namespace = canvas.name;
const name = (n) => `${namespace}-${n}`;Create the demo Label entity
const mytext = scrawl.makeLabel({
name: name('display-shape-text'),
start: ['center', 'center'],
handle: ['center', 'center'],
text: `Canvas display shape: undetermined`,
fontString: '40px sans-serif',
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({
fontString: '40px sans-serif',
});
},
actionRegularArea: () => {
mytext.set({
fontString: '28px sans-serif',
});
},
actionSmallestArea: () => {
mytext.set({
fontString: '16px sans-serif',
});
},
});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({
fontString: '34px sans-serif',
});
});
canvas.setActionSmallerArea(() => {
mytext.set({
fontString: '22px sans-serif',
});
});Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage');Create the Display cycle animation
scrawl.makeRender({
name: name('animation'),
target: canvas,
afterShow: report,
});console.log(scrawl.library);