diff --git a/test/demo/assets/7.svg b/test/demo/assets/7.svg new file mode 100644 index 00000000..0bb076c7 --- /dev/null +++ b/test/demo/assets/7.svg @@ -0,0 +1,15 @@ + + + + + + + + + \ No newline at end of file diff --git a/test/demo/demo.css b/test/demo/demo.css index 173ba033..5486b560 100644 --- a/test/demo/demo.css +++ b/test/demo/demo.css @@ -1,9 +1,10 @@ #body-wrapper { width: 1200px; margin: 0 auto; overflow: hidden; position: relative; } -#fps { position: absolute; left: 0; top: 0; background: rgb(200,200,200); width: 70px; } +#fps { position: absolute; left: 1px; top: 0; background: rgb(200,200,200); width: 70px; z-index: 1000; } #commands { float: left; list-style: none; } -#canvas-console { display: block; } +#canvas-console { display: block; font-size: 11px; } #rasterize { margin-top: 10px; color: green; } -#complexity { position: absolute; bottom: -2px; left: 0; } +#complexity { position: absolute; bottom: -20px; left: 0; } +#controls { margin-bottom: 5px; } .canvas_container { margin: 0 auto; position: relative; float: left; border: 1px solid #aaa; } .clear { color: red; font-weight: bold; margin-top: 1em; } \ No newline at end of file diff --git a/test/demo/demo.js b/test/demo/demo.js index 23b9bc9e..50b3495a 100644 --- a/test/demo/demo.js +++ b/test/demo/demo.js @@ -152,4 +152,38 @@ } }; + var supportsSlider = (function(){ + var el = document.createElement('input'); + el.type = 'range'; + return el.type === 'range'; + })(); + + if (supportsSlider) { + var controls = document.getElementById('controls'); + + var sliderLabel = document.createElement('label'); + sliderLabel.htmlFor = 'opacity'; + sliderLabel.innerHTML = 'Opacity: '; + + var slider = document.createElement('input'); + slider.type = 'range'; + slider.id = 'opacity'; + slider.value = 100; + + controls.appendChild(sliderLabel); + controls.appendChild(slider); + + canvas.calcOffset(); + + slider.onchange = function() { + var activeObject = canvas.getActiveObject(), + activeGroup = canvas.getActiveGroup(); + + if (activeObject || activeGroup) { + (activeObject || activeGroup).set('opacity', parseInt(this.value, 10) / 100); + canvas.renderAll(); + } + }; + } + })(); \ No newline at end of file diff --git a/test/demo/index.html b/test/demo/index.html index 1d37d7fe..ce6473fc 100644 --- a/test/demo/index.html +++ b/test/demo/index.html @@ -16,11 +16,16 @@
-
- +
+ +
+
+ +
+ +
+
Canvas complexity (number of paths):
-
Canvas complexity (number of paths):
-