fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
3 lines (2 loc) • 3.71 kB
JavaScript
import{defineProperty as t}from"../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{iMatrix as o}from"../constants.min.mjs";import{parseTransformAttribute as r}from"../parser/parseTransformAttribute.min.mjs";import{uid as s}from"../util/internals/uid.min.mjs";import{pick as i}from"../util/misc/pick.min.mjs";import{matrixToSVG as e}from"../util/misc/svgExport.min.mjs";import{radialDefaultCoords as n,linearDefaultCoords as a}from"./constants.min.mjs";import{parseColorStops as f}from"./parser/parseColorStops.min.mjs";import{parseCoords as m}from"./parser/parseCoords.min.mjs";import{parseGradientUnits as d,parseType as p}from"./parser/misc.min.mjs";import{classRegistry as c}from"../ClassRegistry.min.mjs";import{isPath as h}from"../util/typeAssertions.min.mjs";class l{constructor(t){const{type:o="linear",gradientUnits:r="pixels",coords:i={},colorStops:e=[],offsetX:f=0,offsetY:m=0,gradientTransform:d,id:p}=t||{};Object.assign(this,{type:o,gradientUnits:r,coords:{..."radial"===o?n:a,...i},colorStops:e,offsetX:f,offsetY:m,gradientTransform:d,id:p?`${p}_${s()}`:s()})}addColorStop(t){for(const o in t)this.colorStops.push({offset:parseFloat(o),color:t[o]});return this}toObject(t){return{...i(this,t),type:this.type,coords:{...this.coords},colorStops:this.colorStops.map(t=>({...t})),offsetX:this.offsetX,offsetY:this.offsetY,gradientUnits:this.gradientUnits,gradientTransform:this.gradientTransform?[...this.gradientTransform]:void 0}}toSVG(t){let{additionalTransform:r}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const s=[],i=this.gradientTransform?this.gradientTransform.concat():o.concat(),n="pixels"===this.gradientUnits?"userSpaceOnUse":"objectBoundingBox",a=this.colorStops.map(t=>({...t})).sort((t,o)=>t.offset-o.offset);let f=-this.offsetX,m=-this.offsetY;"objectBoundingBox"===n?(f/=t.width,m/=t.height):(f+=t.width/2,m+=t.height/2),h(t)&&"percentage"!==this.gradientUnits&&(f-=t.pathOffset.x,m-=t.pathOffset.y),i[4]-=f,i[5]-=m;const d=[`id="SVGID_${this.id}"`,`gradientUnits="${n}"`,`gradientTransform="${r?r+" ":""}${e(i)}"`,""].join(" ");if("linear"===this.type){const{x1:t,y1:o,x2:r,y2:i}=this.coords;s.push("<linearGradient ",d,' x1="',t,'" y1="',o,'" x2="',r,'" y2="',i,'">\n')}else if("radial"===this.type){const{x1:t,y1:o,x2:r,y2:i,r1:e,r2:n}=this.coords,f=e>n;s.push("<radialGradient ",d,' cx="',f?t:r,'" cy="',f?o:i,'" r="',f?e:n,'" fx="',f?r:t,'" fy="',f?i:o,'">\n'),f&&(a.reverse(),a.forEach(t=>{t.offset=1-t.offset}));const m=Math.min(e,n);if(m>0){const t=m/Math.max(e,n);a.forEach(o=>{o.offset+=t*(1-o.offset)})}}return a.forEach(t=>{let{color:o,offset:r}=t;s.push(`<stop offset="${100*r}%" style="stop-color:${o};"/>\n`)}),s.push("linear"===this.type?"</linearGradient>":"</radialGradient>","\n"),s.join("")}toLive(t){const{x1:o,y1:r,x2:s,y2:i,r1:e,r2:n}=this.coords,a="linear"===this.type?t.createLinearGradient(o,r,s,i):t.createRadialGradient(o,r,e,s,i,n);return this.colorStops.forEach(t=>{let{color:o,offset:r}=t;a.addColorStop(r,o)}),a}static async fromObject(t){const{colorStops:o,gradientTransform:r}=t;return new this({...t,colorStops:o?o.map(t=>({...t})):void 0,gradientTransform:r?[...r]:void 0})}static fromElement(t,o,s){const i=d(t),e=o._findCenterFromElement();return new this({id:t.getAttribute("id")||void 0,type:p(t),coords:m(t,{width:s.viewBoxWidth||s.width,height:s.viewBoxHeight||s.height}),colorStops:f(t,s.opacity),gradientUnits:i,gradientTransform:r(t.getAttribute("gradientTransform")||""),..."pixels"===i?{offsetX:o.width/2-e.x,offsetY:o.height/2-e.y}:{offsetX:0,offsetY:0}})}}t(l,"type","Gradient"),c.setClass(l,"gradient"),c.setClass(l,"linear"),c.setClass(l,"radial");export{l as Gradient};
//# sourceMappingURL=Gradient.min.mjs.map