v 0.3.0

2026-07-07 10:20:54 +08:00 · 2015-01-25 14:42:25 -05:00
parent 1bf607390f
commit 8aebf438a9
7 changed files with 416 additions and 341 deletions
@@ -1,85 +1,51 @@
 document.onreadystatechange = function() {
-    if (document.readyState === 'complete') {
+	'use strict';
+	if (document.readyState === 'complete') {
+		(function() {
+			var container = document.getElementsByTagName('section')[0];
+			var w = 448;
+			var h = 250;
+			var options = optionsArr;

-        (function() {
-            var container = document.getElementsByTagName('section')[0];
-            var w = 448;
-            var h = 250;
-            var aspectRatio = 0;
-            var text = 'Canvas text wrapping example';
+			createExamples();

-            var img = new Image();
-            img.src = 'img/bg.jpg';
-            img.onload = function() {
-                aspectRatio = img.naturalWidth / img.naturalHeight;
-                createExamples();
-            };
+			function createExamples() {
+				var fragment = new DocumentFragment();
+				var context;

-            // use options.js file
-            var options = optionsArr;
+				for (var i = 0; i < options.length; i++) {
+					var exampleItem = document.createElement('div');
+					fragment.appendChild(exampleItem);

-            function createExamples() {
-                var fragment = new DocumentFragment();
-                var context;
+					var canvas = document.createElement('canvas');
+					exampleItem.appendChild(canvas);
+					canvas.width = w;
+					canvas.height = h;
+					context = canvas.getContext('2d');
+					context.lineWidth = 2;
+					context.strokeStyle = 'red';
+					CanvasTextWrapper(canvas,(options[i].txt),options[i]);

-                for (var i = 0; i < options.length; i++) {
-                    var exampleItem = document.createElement('div');
-                    fragment.appendChild(exampleItem);
+					var hint = document.createElement('div');
+					exampleItem.appendChild(hint);
+					var optionsData = '';

-                    // draw canvas image
-                    var canvasImg = document.createElement('canvas');
-                    canvasImg.width = w;
-                    canvasImg.height = h;
-                    context = canvasImg.getContext('2d');
-                    context.drawImage(img, 0, 0, w, w * aspectRatio);
-                    exampleItem.appendChild(canvasImg);
+					for (var property in options[i]) {
+						if (options[i].hasOwnProperty(property)) {
+							if (property == 'txt') continue;
+							var stringWrapper = (property == 'paddingX' || property == 'paddingY' || property == 'sizeToFill' || property === 'justifyLines' || property === 'allowNewLine' || property === 'strokeText') ? '' : '"';
+							optionsData += '         <span>' + property + ':</span> ' +
+							stringWrapper + options[i][property] + stringWrapper + ',<br/>';
+						}
+					}

-                    // create canvas mask layer
-                    var canvasMask = document.createElement('canvas');
-                    canvasMask.width = w;
-                    canvasMask.height = h;
-                    context = canvasMask.getContext('2d');
-                    context.fillStyle = 'rgba(255,255,255, 1)';
-                    context.fillRect(0, 0, w, h);
-                    exampleItem.appendChild(canvasMask);
+					hint.innerHTML = '<h6>CODE:</h6><p>' +
+					'CanvasTextWrapper(canvas, str, {<br/>' + optionsData + '});' +
+					'</p>';
+				}

-                    if (i < options.length -1) {
-                        // create text to be cut out mask layer
-                        context.fillStyle = '#212121';
-                        context.globalCompositeOperation = 'destination-out';
-                    } else {
-                        // make stroke gradient
-                        var gradient=context.createLinearGradient(0,0,canvasImg.width,0);
-                        gradient.addColorStop("0","#ffff00");
-                        gradient.addColorStop("1.0","red");
-                        context.strokeStyle=gradient;
-                        context.lineWidth = 3;
-                    }
-
-                    // create wrapper
-                    new CanvasTextWrapper(canvasMask, ('#' + (i + 1) + ' ' + text), options[i]);
-
-                    // create hint code block
-                    var hint = document.createElement('div');
-                    exampleItem.appendChild(hint);
-                    var optionsData = '';
-
-                    // read used properties
-                    for (var property in options[i]) {
-                        var stringWrapper = (property == 'paddingX' || property == 'paddingY' || property == 'sizeToFill') ? '' : '"';
-                        optionsData += '         <span>' + property + ':</span> ' +
-                            stringWrapper + options[i][property] + stringWrapper + ',<br/>';
-                    }
-
-                    // print example code
-                    hint.innerHTML = '<h6>CODE:</h6><p>' +
-                        'new CanvasTextWrapper(canvasEl, textStr, {<br/>' + optionsData + '});' +
-                        '</p>';
-                }
-
-                // inject document fragment into actual DOM
-                container.appendChild(fragment);
-            }
-        })();
-    }
+				container.appendChild(fragment);
+			}
+		})();
+	}
 };