Added fabric.js type definitions

2026-09-24 13:00:46 +08:00 · 2012-12-27 14:02:56 +01:00
parent d57605344b
commit 15b588db28
9 changed files with 1880 additions and 0 deletions
@@ -0,0 +1,122 @@
+///<reference path="..\fabricjs.d.ts" />
+
+var $ = function(id){return document.getElementById(id)};
+
+function applyFilter(index, filter) {
+  var obj = <fabric.IImage>canvas.getActiveObject();
+  obj.filters[index] = filter;
+  obj.applyFilters(canvas.renderAll.bind(canvas));
+}
+
+function applyFilterValue(index, prop, value) {
+  var obj = <fabric.IImage>canvas.getActiveObject();
+  if (obj.filters[index]) {
+    obj.filters[index][prop] = value;
+    obj.applyFilters(canvas.renderAll.bind(canvas));
+  }
+}
+
+var canvas = new fabric.Canvas('c', { backgroundImage: '../lib/bg.png' }),
+    f = fabric.Image.filters;
+
+canvas.on({
+  'object:selected': function() {
+    fabric.util.toArray(document.getElementsByTagName('input')).forEach(function(el){ el.disabled = false; })
+
+    var filters = ['grayscale', 'invert', 'remove-white', 'sepia', 'sepia2', 'brightness',
+                   'noise', 'gradient-transparency', 'pixelate', 'blur', 'sharpen'];
+
+    for (var i = 0; i < filters.length; i++) {
+        var checkBox = <HTMLInputElement>$(filters[i]);
+        var image = <fabric.Image>canvas.getActiveObject();
+        checkBox.checked = !!image.filters[i];
+    }
+  },
+  'selection:cleared': function() {
+    fabric.util.toArray(document.getElementsByTagName('input')).forEach(function(el){ el.disabled = true; })
+  }
+});
+
+fabric.Image.fromURL('../assets/printio.png', function(img) {
+  var oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9);
+  canvas.add(oImg).renderAll();
+  canvas.setActiveObject(oImg);
+});
+
+$('grayscale').onclick = function() {
+  applyFilter(0, this.checked && new f.Grayscale());
+};
+$('invert').onclick = function() {
+  applyFilter(1, this.checked && new f.Invert());
+};
+$('remove-white').onclick = function () {
+  applyFilter(2, this.checked && new f.RemoveWhite({
+    threshold: (<HTMLInputElement>$('remove-white-threshold')).value,
+    distance: (<HTMLInputElement>$('remove-white-distance')).value
+  }));
+};
+$('remove-white-threshold').onchange = function() {
+  applyFilterValue(2, 'threshold', this.value);
+};
+$('remove-white-distance').onchange = function() {
+  applyFilterValue(2, 'distance', this.value);
+};
+$('sepia').onclick = function() {
+  applyFilter(3, this.checked && new f.Sepia());
+};
+$('sepia2').onclick = function() {
+  applyFilter(4, this.checked && new f.Sepia2());
+};
+$('brightness').onclick = function () {
+  applyFilter(5, this.checked && new f.Brightness({
+    brightness: parseInt((<HTMLInputElement>$('brightness-value')).value, 10)
+  }));
+};
+$('brightness-value').onchange = function() {
+  applyFilterValue(5, 'brightness', parseInt(this.value, 10));
+};
+$('noise').onclick = function () {
+  applyFilter(6, this.checked && new f.Noise({
+        noise: parseInt((<HTMLInputElement>$('noise-value')).value, 10)
+  }));
+};
+$('noise-value').onchange = function() {
+  applyFilterValue(6, 'noise', parseInt(this.value, 10));
+};
+$('gradient-transparency').onclick = function () {
+  applyFilter(7, this.checked && new f.GradientTransparency({
+    threshold: parseInt((<HTMLInputElement>$('gradient-transparency-value')).value, 10)
+  }));
+};
+$('gradient-transparency-value').onchange = function() {
+  applyFilterValue(7, 'threshold', parseInt(this.value, 10));
+};
+$('pixelate').onclick = function() {
+  applyFilter(8, this.checked && new f.Pixelate({
+    blocksize: parseInt((<HTMLInputElement>$('pixelate-value')).value, 10)
+  }));
+};
+$('pixelate-value').onchange = function() {
+  applyFilterValue(8, 'blocksize', parseInt(this.value, 10));
+};
+$('blur').onclick = function() {
+  applyFilter(9, this.checked && new f.Convolute({
+    matrix: [ 1/9, 1/9, 1/9,
+              1/9, 1/9, 1/9,
+              1/9, 1/9, 1/9 ]
+  }));
+};
+$('sharpen').onclick = function() {
+  applyFilter(10, this.checked && new f.Convolute({
+    matrix: [  0, -1,  0,
+              -1,  5, -1,
+               0, -1,  0 ]
+  }));
+};
+$('emboss').onclick = function() {
+  applyFilter(11, this.checked && new f.Convolute({
+    matrix: [ 1,   1,  1,
+              1, 0.7, -1,
+             -1,  -1, -1 ]
+  }));
+};