mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-05-23 12:45:48 +00:00
Doc additions
Add examples and links to jsfiddle to `fabric.Object.setGradient`, `fabric.Object.setPatternFill`, `fabric.Object.setShadow` and `fabric.Canvas.toDataURL
This commit is contained in:
parent
db8f0515f1
commit
9de6c9a473
2 changed files with 71 additions and 0 deletions
|
|
@ -11,6 +11,25 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
|
|||
* @param {Number} [options.width] Cropping width. Introduced in v1.2.14
|
||||
* @param {Number} [options.height] Cropping height. Introduced in v1.2.14
|
||||
* @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format
|
||||
* @see {@link http://jsfiddle.net/fabricjs/NfZVb/|jsFiddle demo}
|
||||
* @example <caption>Generate jpeg dataURL with lower quality</caption>
|
||||
* var dataURL = canvas.toDataURL({
|
||||
* format: 'jpeg',
|
||||
* quality: 0.8
|
||||
* });
|
||||
* @example <caption>Generate cropped png dataURL (clipping of canvas)</caption>
|
||||
* var dataURL = canvas.toDataURL({
|
||||
* format: 'png',
|
||||
* left: 100,
|
||||
* top: 100,
|
||||
* width: 200,
|
||||
* height: 200
|
||||
* });
|
||||
* @example <caption>Generate double scaled png dataURL</caption>
|
||||
* var dataURL = canvas.toDataURL({
|
||||
* format: 'png',
|
||||
* multiplier: 2
|
||||
* });
|
||||
*/
|
||||
toDataURL: function (options) {
|
||||
options || (options = { });
|
||||
|
|
|
|||
|
|
@ -1188,6 +1188,37 @@
|
|||
* @param {Object} [options.colorStops] Color stops object eg. {0: 'ff0000', 1: '000000'}
|
||||
* @return {fabric.Object} thisArg
|
||||
* @chainable
|
||||
* @see {@link http://jsfiddle.net/fabricjs/58y8b/|jsFiddle demo}
|
||||
* @example <caption>Set linear gradient</caption>
|
||||
* object.setGradient('fill', {
|
||||
* type: 'linear',
|
||||
* x1: -object.width / 2,
|
||||
* y1: 0,
|
||||
* x2: object.width / 2,
|
||||
* y2: 0,
|
||||
* colorStops: {
|
||||
* 0: 'red',
|
||||
* 0.5: '#005555',
|
||||
* 1: 'rgba(0,0,255,0.5)'
|
||||
* }
|
||||
* });
|
||||
* canvas.renderAll();
|
||||
* @example <caption>Set radial gradient</caption>
|
||||
* object.setGradient('fill', {
|
||||
* type: 'radial',
|
||||
* x1: 0,
|
||||
* y1: 0,
|
||||
* x2: 0,
|
||||
* y2: 0,
|
||||
* r1: object.width / 2,
|
||||
* r2: 10,
|
||||
* colorStops: {
|
||||
* 0: 'red',
|
||||
* 0.5: '#005555',
|
||||
* 1: 'rgba(0,0,255,0.5)'
|
||||
* }
|
||||
* });
|
||||
* canvas.renderAll();
|
||||
*/
|
||||
setGradient: function(property, options) {
|
||||
options || (options = { });
|
||||
|
|
@ -1224,6 +1255,15 @@
|
|||
* @param {Number} [options.offsetY=0] Pattern vertical offset from object's left/top corner
|
||||
* @return {fabric.Object} thisArg
|
||||
* @chainable
|
||||
* @see {@link http://jsfiddle.net/fabricjs/QT3pa/|jsFiddle demo}
|
||||
* @example <caption>Set pattern</caption>
|
||||
* fabric.util.loadImage('http://fabricjs.com/assets/escheresque_ste.png', function(img) {
|
||||
* object.setPatternFill({
|
||||
* source: img,
|
||||
* repeat: 'repeat'
|
||||
* });
|
||||
* canvas.renderAll();
|
||||
* });
|
||||
*/
|
||||
setPatternFill: function(options) {
|
||||
return this.set('fill', new fabric.Pattern(options));
|
||||
|
|
@ -1238,6 +1278,18 @@
|
|||
* @param {Number} [options.offsetY=0] Shadow vertical offset
|
||||
* @return {fabric.Object} thisArg
|
||||
* @chainable
|
||||
* @see {@link http://jsfiddle.net/fabricjs/7gvJG/|jsFiddle demo}
|
||||
* @example <caption>Set shadow with string notation</caption>
|
||||
* object.setShadow('2px 2px 10px rgba(0,0,0,0.2)');
|
||||
* canvas.renderAll();
|
||||
* @example <caption>Set shadow with object notation</caption>
|
||||
* object.setShadow({
|
||||
* color: 'red',
|
||||
* blur: 10,
|
||||
* offsetX: 20,
|
||||
* offsetY: 20
|
||||
* });
|
||||
* canvas.renderAll();
|
||||
*/
|
||||
setShadow: function(options) {
|
||||
return this.set('shadow', new fabric.Shadow(options));
|
||||
|
|
|
|||
Loading…
Reference in a new issue