paper.js/examples/Rasters/Raster.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Raster</title>
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        // Load from Server:
        var raster = new Raster('http://assets.paperjs.org/images/marilyn.jpg');
        // Load from DOM image:
        // var raster = new Raster('marilyn');
        raster.onLoad = function() {
            console.log('Successfully loaded image!');
        };
        var lastScale = 1;
        var center = view.center;
        function onFrame(event) {
            var scale = (Math.sin(event.time * 2) + 1) / 2;
            raster.scale(scale / lastScale);
            lastScale = scale;
            raster.position = center + [
                Math.sin(event.time * 3) * 256,
                Math.sin(event.time * 2.5) * 256
            ];
            raster.rotate(event.delta * 120);
        }
    </script>
</head>
<body>
    <canvas id="canvas" resize></canvas>
    <img id="marilyn" width="512" height="512" style="display: none;" src="data:image/jpg;base64,/9j/4QCMRXhpZgAASUkqAAgAAAABAJiCAgBoAAAAGgAAAAAAAAAoYykgVGhlIEFuZHkgV2FyaG9sIEZvdW5kYXRpb24gZm9yIHRoZSBWaXN1YWwgQXJ0cywgSW5jLi9BUlMsIE5ZIGFuZCBEQUNTLCBMb25kb24gMjAxNSAvIFBob3RvIChjKSBUYXRlAAAA/+wAEUR1Y2t5AAEABAAAAEYAAP/hBMRodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSIyMTg3MDRCMTYxMzUxNkYxN0EyOEE2REJEQUVFNkI4MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4RDg0OUYzMUZEN0IxMUU0OUJGRkUwNUI5RDlBQ0M5NyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4RDg0OUYzMEZEN0IxMUU0OUJGRkUwNUI5RDlBQ0M5NyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJv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
</body>
</html>
Examples: Uncommented out doctype in a few example html files to avoid quirks mode 2011-06-30 21:20:09 -04:00			`<!DOCTYPE html>`
Add Raster example. 2011-03-06 07:08:24 -05:00			`<html>`
			`<head>`
Replace tabs with 4 white-spaces. 2014-08-16 13:24:54 -04:00			`<meta charset="UTF-8">`
			`<title>Raster</title>`
			`<link rel="stylesheet" href="../css/style.css">`
			`<script type="text/javascript" src="../../dist/paper-full.js"></script>`
			`<script type="text/paperscript" canvas="canvas">`
			`// Load from Server:`
Replace Lenna with Marilyn. 2015-05-31 04:50:04 -04:00			`var raster = new Raster('http://assets.paperjs.org/images/marilyn.jpg');`
Replace tabs with 4 white-spaces. 2014-08-16 13:24:54 -04:00			`// Load from DOM image:`
Replace Lenna with Marilyn. 2015-05-31 04:50:04 -04:00			`// var raster = new Raster('marilyn');`
Replace tabs with 4 white-spaces. 2014-08-16 13:24:54 -04:00			`raster.onLoad = function() {`
			`console.log('Successfully loaded image!');`
			`};`
			`var lastScale = 1;`
			`var center = view.center;`
			`function onFrame(event) {`
			`var scale = (Math.sin(event.time * 2) + 1) / 2;`
			`raster.scale(scale / lastScale);`
			`lastScale = scale;`
Restructure event handling on Raster item. - Trigger #onLoad() events from Raster#setImage() also - Add support for Raster#onError() handler Closes #849 and #924 2016-01-26 15:06:36 -05:00			`raster.position = center + [`
			`Math.sin(event.time * 3) * 256,`
			`Math.sin(event.time * 2.5) * 256`
			`];`
Replace tabs with 4 white-spaces. 2014-08-16 13:24:54 -04:00			`raster.rotate(event.delta * 120);`
			`}`
			`</script>`
Add Raster example. 2011-03-06 07:08:24 -05:00			`</head>`
			`<body>`
Replace tabs with 4 white-spaces. 2014-08-16 13:24:54 -04:00			`<canvas id="canvas" resize></canvas>`
Replace Lenna with Marilyn. 2015-05-31 04:50:04 -04:00			<img id="marilyn" width="512" height="512" style="display: none;" src="data:image/jpg;base64,/9j/4QCMRXhpZgAASUkqAAgAAAABAJiCAgBoAAAAGgAAAAAAAAAoYykgVGhlIEFuZHkgV2FyaG9sIEZvdW5kYXRpb24gZm9yIHRoZSBWaXN1YWwgQXJ0cywgSW5jLi9BUlMsIE5ZIGFuZCBEQUNTLCBMb25kb24gMjAxNSAvIFBob3RvIChjKSBUYXRlAAAA/+wAEUR1Y2t5AAEABAAAAEYAAP/hBMRodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSIyMTg3MDRCMTYxMzUxNkYxN0EyOEE2REJEQUVFNkI4MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4RDg0OUYzMUZEN0IxMUU0OUJGRkUwNUI5RDlBQ0M5NyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4RDg0OUYzMEZEN0IxMUU0OUJGRkUwNUI5RDlBQ0M5NyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJv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
Examples: close html tag. 2011-05-30 18:27:39 -04:00			`</body>`
Switch from dist/paper.js to dist/paper-full.js and explain the different versions in the README. Closes #422. 2014-04-06 07:44:19 -04:00			`</html>`