Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-12 07:43:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add another shape and an opacity slider (when input[type=range] is supported).

Browse source
This commit is contained in:
kangax 2010-08-03 01:27:41 -04:00
parent d869eac11f
commit 1b824736bd
4 changed files with 81 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
test/demo/assets/7.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

7
test/demo/demo.css
View file

@ -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; }

34
test/demo/demo.js
View file

@ -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();
}
};
}
})();

37
test/demo/index.html
View file

@ -16,11 +16,16 @@
</head>
<body>
<div id="body-wrapper">
<div id="fps">
<div id="controls">
</div>
<div style="position:relative;width:804px;height:604px;float:left;">
<canvas id="canvas" width="800" height="600"></canvas>
<div id="fps">
</div>
<div id="complexity">Canvas complexity (number of paths):<strong></strong></div>
</div>
<div id="complexity">Canvas complexity (number of paths):<strong></strong></div>
<canvas id="canvas" width="800" height="600"></canvas>
<ul id="commands">
<li style="font-weight:bold;margin-bottom:1em">Add objects to canvas:</li>
@ -28,10 +33,13 @@
<li><button class="rect">Rectangle</button></li>
<li><button class="circle">Circle</button></li>
<li><button class="triangle">Triangle</button></li>
<li><button class="image1">Image 1</button></li>
<li style="margin-top:10px"><button class="image1">Image 1</button></li>
<li><button class="image2">Image 2</button></li>
<li><button class="shape" id="shape2">SVG shape (<strong>90</strong> paths)</button></li>
<li style="margin-top:10px;"><button class="shape" id="shape2">SVG shape (<strong>90</strong> paths)</button></li>
<li><button class="shape" id="shape1">SVG shape (<strong>448</strong> paths)</button></li>
<li><button class="shape" id="shape7">SVG shape (<strong>1018</strong> paths)</button></li>
<li><button class="shape" id="shape3">SVG shape (<strong>1197</strong> paths)</button></li>
<li><button class="shape" id="shape5">SVG shape (<strong>2208</strong> paths)</button></li>
<li><button class="shape" id="shape4">SVG shape (<strong>2742</strong> paths)</button></li>
@ -42,11 +50,10 @@
<li><button class="clear">Clear canvas</button></li>
<li><button id="remove-selected">Remove selected object/group</button></li>
<li style="margin-top:20px;">
<li style="margin-top:10px;">
<label for="canvas-console">Execute code:</label>
<textarea rows="17" cols="45" id="canvas-console">
/*
// clear canvas
canvas.clear();
@ -55,9 +62,21 @@ canvas.remove(canvas.getActiveObject());
// add red rectangle
canvas.add(new fabric.Rect({
width: 50, height: 50, left: 50, top: 50, fill: 'rgb(255,0,0)'
width: 50,
height: 50,
left: 50,
top: 50,
fill: 'rgb(255,0,0)'
}));
// add green, half-transparent circle
canvas.add(new fabric.Circle({
radius: 40,
left: 50,
top: 50,
fill: 'rgb(0,255,0)',
opacity: 0.5
}));
*/
</textarea>
<button type="button" id="execute">Execute</button>