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