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