2013-06-18 11:02:04 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2014-08-16 13:24:54 -04:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>BlendModes</title>
|
|
|
|
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
|
|
|
|
<script type="text/paperscript" canvas="canvas">
|
|
|
|
|
var stops = [];
|
|
|
|
|
for (var i = 0; i < 6; i++)
|
|
|
|
|
stops.push({ hue: (i - 3) * 60, saturation: 1, brightness: 1 });
|
|
|
|
|
var size = new Size(150, 150)
|
|
|
|
|
var background = new Path.Rectangle({
|
|
|
|
|
rectangle: new Rectangle(size),
|
|
|
|
|
fillColor: {
|
|
|
|
|
stops: stops,
|
|
|
|
|
origin: [0, 0],
|
|
|
|
|
destination: [size.width, 0]
|
|
|
|
|
}
|
|
|
|
|
});
|
2013-06-18 11:02:04 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var image = new Raster('ducky');
|
|
|
|
|
image.fitBounds(background.bounds);
|
2013-06-18 20:23:38 -04:00
|
|
|
|
2016-01-31 10:52:51 -05:00
|
|
|
background = new SymbolDefinition(background);
|
|
|
|
|
image = new SymbolDefinition(image);
|
2013-06-18 11:02:04 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var all = new Group();
|
|
|
|
|
function makeExample(point, blendMode) {
|
|
|
|
|
var rect = background.place();
|
|
|
|
|
// var img = new Raster('ducky');
|
|
|
|
|
var img = image.place();
|
|
|
|
|
img.fitBounds(rect.bounds);
|
|
|
|
|
img.blendMode = blendMode;
|
|
|
|
|
var text = new PointText({
|
|
|
|
|
point: [0, size.height / 2 + 15],
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
justification: 'center',
|
|
|
|
|
content: mode + (paper.support.nativeBlendModes[mode] ? ' (native)' : '')
|
|
|
|
|
})
|
|
|
|
|
var group = new Group(rect, img, text);
|
|
|
|
|
group.position = point;
|
|
|
|
|
all.addChild(group);
|
|
|
|
|
}
|
2013-06-18 11:02:04 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var modes = [ 'normal', 'multiply', 'screen', 'overlay', 'soft-light',
|
|
|
|
|
'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
|
|
|
|
|
'difference', 'exclusion', 'hue', 'saturation', 'luminosity',
|
|
|
|
|
'color', 'add', 'subtract', 'average', 'pin-light', 'negation'];
|
|
|
|
|
var columns = 5;
|
|
|
|
|
var rows = Math.ceil(modes.length / columns);
|
|
|
|
|
for (var y = 0, i = 0; y < rows; y++) {
|
|
|
|
|
for (var x = 0; x < columns; x++) {
|
|
|
|
|
var mode = modes[i];
|
|
|
|
|
if (!mode)
|
|
|
|
|
break;
|
|
|
|
|
var point = (new Point(x, y) + 0.5) * (size + 20);
|
|
|
|
|
makeExample(point, mode);
|
|
|
|
|
i++;
|
|
|
|
|
}
|
|
|
|
|
}
|
2013-06-18 20:23:38 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
// all.opacity = 0.5;
|
|
|
|
|
all.position = view.center;
|
2013-06-18 20:23:38 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var svg = project.exportSVG();
|
|
|
|
|
document.body.appendChild(svg);
|
|
|
|
|
//console.log(svg, new XMLSerializer().serializeToString(svg));
|
|
|
|
|
</script>
|
2013-06-18 11:02:04 -04:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-08-16 13:24:54 -04:00
|
|
|
<h2>Paper.js Canvas</h2>
|
|
|
|
|
<canvas id="canvas" width="800" height="850"></canvas>
|
|
|
|
|
<h2>SVG Export</h2>
|
|
|
|
|
<div class id="svg"></div>
|
|
|
|
|
<img id="ducky" style="display:none;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAGuCAYAAADI9eKaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NkVDMDNGM0QwMDUxMUUyQkRGM0NGMDU0QjY0MTQ5MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NkVDMDNGNEQwMDUxMUUyQkRGM0NGMDU0QjY0MTQ5MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk2RUMwM0YxRDAwNTExRTJCREYzQ0YwNTRCNjQxNDkwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk2RUMwM0YyRDAwNTExRTJCREYzQ0YwNTRCNjQxNDkwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ml+yCgACDXhJREFUeNrsvQm4bcdVHriqau9z7vQm6flptixkRXhShDE22PAZJw4fod3Q4AgzhXRMGkIbPswHhiQmJDEkDOl2IAGTEEiCQ6ANBINxMJh021geZVuWJVujpfeehqc3D3c695y9d1VX1V5/rXWfyQAeJdf6dHXvO8Pe++xzTv17rfWv/zchBKpRo0aNGjWeKGHrKahRo0aNGhW4atSoUaNGjQpcNWrUqFGjRgWuGjVq1KhRgatGjRo1atSowFWjRo0aNWpU4KpRo0aNGhW4atSoUaNGjQpcNWrUqFGjRgWuGjVq1KhRgatGjRo1atSowFWjRo0aNWqoaOopqPG5ivmFT+zx3caeodtepbCY9rPFZL5x/Mph59Tli/7cJc0wNL7bWg2ub8JgyNiVrWa6su0me89Tu7YxXbnqYbe0tmHi5Zdtmi7Q2kYT/720/4aNenZr1KjAVaPGpxSz03devjh/1807Fw7fsNja3NNtHr6+W3/4Ot8ff0kEKjLDFg1zIpc+kT7+Z4hCF3/Hn3aN4v1EQ/xppuNtQx9vi4DVp9va+Pd0ieazy2jl0svf4fZcc3Syevmxdnn/ucnqJafbPc++Y3rJs+5cPnClr+9EjRpP/DDV1qTGZyouPPSbX7N17C23LM4cu3p27uTlw+zkzc6fp+A8mUn88EVwMhGA2vg3PoVN/Dv9o0ugteD794y3pR+bQCr9Ge8L8e9+J/42I5A53sjcxf/140/wS9SFgzSzT3nPvoMHzq1d/pw79l//N3593zVfeV99h2rUqMBV4ws4Utmv23rs6q1Hbn3p5sO/9R07pz/+lz151xhqQgSSScqk4m8bQca58SdlVsN4MwU7ZlXWjkAUegYqgFr8tw/j89O/+37cRv74Wv4d0gc6/m7HbC13cHt+fPx75wLRYhZ/Burblcl87aoX/unep/+tf7P3smfetXr58w/Xd7FGjQpcNb4gsqrfeunm8dteuP34e7+qP3v7S20/J9OknlPMnpZHIErgkQEn/ng/AlQu75kRjBKAJXBLADb+L94UHxPij2vHEmHKpjwD0+DH56anpnJhSsHS7ek5afsu7jfMOTNLJcV4LEP8Rzw0sm7Mznz86WPWNo8Zm1u77OjyVS/9w9Urb7pj/9Nf8WsrB66d13e2Ro0KXDWeRDE7/fGD5+7+qdfNTtxz02L94etCOH3lJGVVMTtyCUQS+Azj78DglMDDcFaUQCg/JmVKfgSXkO73Y+aUQC+VAvNz4vO7BHSeq4UdZ2CWgY8BMYGUTWCUtt2O20q3ZZBjUEuPS/tO+0rNrrAzgti8G/c7hAkNS19828q1X/aey7/01T+97ynPPlnf7Ro1KnDVeKKC1ZkPXLd55B1fu/6Jf/0Ds+NHr28m1EzWxowo9aGaZgSUBB5maSz9pepgAB3CjtlRyqJS9pUyoFwt7KhkaMOCAQ0fSQa4BGweQDhwWZDGv0HkQGaWy4sMfkMiccTfjkEvZWNNyrwYzNIxpafQgp8b/72It++cj2A2p371GS/7z1d+yfe+fvXQzR+arlViR40aFbhqPCHi3H2/8vLZsfd91daxt77cb5282k1GkEoZVgaSZiRRNAlwmBTh7FiSS4CSqeqGpA/FbMCEGKl/lcp3GWwclwSbMUtK6VLaj+f7um3ugaXndONzggIgGjEs971SCZCMAGXafdqOVwCatpVZiXFbdhjv6zlzy2XEuL/tuB3fLNPyU/7qmy597v/2psue8V1vrp+IGjUqcNX4vAWsX3vZhQd+7Xu6Ux/+cqL1gwk8EiA1dmT2OUYKOx2JEi3Kgv1YMkyfKvSiDINPIVw4Bo+WiRgMXmk7iVVoGXBy/8vINhJQddznMnw7+lXBjMeTnp8YicYzkCaQa7gcaZgM0o4AmggbthtBND1msRhLnWk/6ekLbDvevuP2nm73P/e2a776x3/0wFNf8rH6CalRowJXjc+TuPDQW7/i1Pu+79+HC0evb5epaZc4S3Ij/bw1YxkuLex50Z+MIJEyMWLASeGYiJHAI5UDE+DRlMGmGzO1DHw0AmLKdqznbMyP5cNMrGDCRWYdclkwZ04J/BYj6ATO5jIPZBBQyyXGhWRj3nKGlvpmcyaOWO7BmXFfPRK4MB6n5z7aMCOab8XnWeqXbrzljdc890f/0b6rv/TR+ompUaMCV43PUZx/8P/5mvP3/Ob/Pn/87S+bNjt7Jqvcj2rGhRzltYb7VyPzgcHHjRlLAqDUp0oZSyr55Y9WM5YKLZMmBi7RZTBhkEsAYpjtF1BaZAAiBq6U5eV9duM+0+NSNgRQClxeJC4fpn3nQWX0w5gYkp4DZmHaTwIzn0BwZ3x+YFZj2u/AKJYyscSCzPNl8e9zF+LNK0+77ynP/vrfvu6v/vw/rJ+eGjUqcNX4LMexd7/y5zbv+4NbbGIHLo8DwXnQNzBbj7OjRMKwS0ys4Mwr3WYYSAYrUiwZc8AutExND9x3Ii4fYrtMbU8gkspyOZvy6jmO+RqclWVChucyI40ZoefHpuNKPS7LWRkAqGNSR+D5L8/9rASkqaSZMsmcrbUMlD0/3o4lzJShtZxVJhZium2xbebNU7/u9572la997b6rv+LB+kmqUaMCV43PcJy7999945nbf+p1ZucTX7yySk3q/XgGCkeSVSWZJYMPjOVSIYNHKhFavhOMP8cluJS9mG7cnueMKD0/leCQZSViRMcg5Jgyj/mtDHD9CGjIgoi3NXCZsWFSRyoJeqbQp/2kbCv31bgUmP6diCCg5AccIzFIcQbnAaS8r5Sx5dv8SLVPry2DZjc+ZjZPA81uduWL/8lrrnzBa3+xfqpq1KjAVeMzEN
|
2013-06-18 11:02:04 -04:00
|
|
|
</body>
|
2014-04-06 07:44:19 -04:00
|
|
|
</html>
|
