Вот эскиз , демонстрирующий возможную реализацию.
// Diamond random size settings
const MIN_RADIUS = 10;
const MAX_RADIUS = 50;
// Draw first diamond.
let diamond = drawDiamond(view.center);
// Display instructions.
new PointText({
content: 'Click to draw a new diamond',
point: view.center + [0, -80],
justification: 'center'
});
// Draws a random diamond around the given point and returns it.
function drawDiamond(point) {
// Get random radiuses.
const verticalRadius = getRandomRadius();
const horizontalRadius = getRandomRadius();
// Calculate diamond points.
const top = point + [0, -verticalRadius];
const bottom = point + [0, verticalRadius];
const left = point + [-horizontalRadius, 0];
const right = point + [horizontalRadius, 0];
// Build path.
return new Path({
segments: [top, right, bottom, left],
fillColor: Color.random()
});
}
function getRandomRadius() {
return MIN_RADIUS + Math.random() * (MAX_RADIUS - MIN_RADIUS);
}
// On mouse down...
function onMouseDown() {
// ...delete existing diamond...
diamond.remove();
// ...and draw a new one.
diamond = drawDiamond(view.center);
}