paper.js/examples/Rasters/Smoothing.html

49 lines
30 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
2018-10-03 13:01:02 -04:00
<title>Raster Smoothing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
2018-10-03 13:01:02 -04:00
// Draw raster with default smoothing value:
var defaultRaster = new Raster('pattern');
2018-10-03 13:01:02 -04:00
// Wait for it to be loaded:
defaultRaster.onLoad = function () {
var textOffset = [0, -10];
// Scale it up so that we can see if pixels are smoothed or not
defaultRaster.scale(3);
defaultRaster.position = [ 200, 250 ];
2018-10-03 13:01:02 -04:00
new PointText({
point: defaultRaster.bounds.topLeft + textOffset,
content: 'Default'
});
2018-10-03 13:01:02 -04:00
// Make a clone with smoothing set to true.
var smoothedRaster = defaultRaster.clone();
smoothedRaster.smoothing = true;
smoothedRaster.position += [ 0, defaultRaster.bounds.height + 50 ];
2018-10-03 13:01:02 -04:00
new PointText({
point: smoothedRaster.bounds.topLeft + textOffset,
content: 'Smoothed'
});
2018-10-03 13:01:02 -04:00
// Make a clone with smoothing set to false.
var pixelatedRaster = defaultRaster.clone();
pixelatedRaster.smoothing = false;
pixelatedRaster.position += [ defaultRaster.bounds.width + 50, 0 ];
2018-10-03 13:01:02 -04:00
new PointText({
point: pixelatedRaster.bounds.topLeft + textOffset,
content: 'Pixelated'
});
};
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
2018-10-03 13:01:02 -04:00
<img id="pattern" width="512" height="512" style="display: none;" src="data:image/png;base64,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
</body>
</html>