diff --git a/README.md b/README.md index c8b9cc7..c649068 100644 --- a/README.md +++ b/README.md @@ -12,9 +12,11 @@ To use the installed minified version with `Require "svg-lua"`, you must add the Check the `package.path` documentation for more information about it. +### normal usage to draw a complete svg + ```lua mon_dessin = svg:create() -mon_dessin:add(mon_dessin:Rect()) +mon_dessin:addRect() mon_dessin:draw() ``` @@ -26,6 +28,49 @@ result for `print(mon_dessin:draw())` : ``` +You can modify an existing element and add it several times in the same drawing: + +```lua +mon_dessin = svg:create() +rectangle = mon_dessin.Rect() +mon_dessin:add(rectangle) +rectangle.x = 20 +rectangle.y = 20 +mon_dessin.add(rectangle) +mon_dessin.draw() +``` + +result for `print(mon_dessin:draw())` : + +```html + + + + +``` + +### using the lib to generate only elements, without the global `` + +all svg elements are composed with these properties: + +- name : the type of element (rect, text, polyline, ...) +- content : if the elements have a content (eg: the text content for ``) +- strElement : the complete element, with all the parmaters, rendered as a svg string +- all other option : all the element options that are present in svg (eg: x, y, height, width, ...) + +you can use the strElement option to get the svg formated string and use it as you want. + +```lua +mon_dessin = svg:create() +rectangle = mon_dessin:Rect() +``` + +result for `print(rectangle.strElement)` : + +```html + +``` + ### testing can be tested [here](https://www.jdoodle.com/execute-lua-online) @@ -58,13 +103,85 @@ If you installed luamin, you can use the script `minify.bat` included to minify - stroke: string => lines color, default to "#000000" - fill: string => fill color, default to "transparent" +**svg:addText(text, x, y, style, transform)** *add text* + + - text: string => the text to write + - x: number => Horizontal position, default to 10 + - y: number => Vertical position, default to 50 + - style: string => style of the text (css with svg params), default to: + * `font-family: Verdana` + * `font-size: 10` + * `stroke: self.stroke` svg:create() parameter ("#000000" by default) + * `fill: self.fill` svg:create() parameter ("transparent" by default) + - tranform: string => transformation options (eg: rotation) + +**svg:addRect(x, y, width, height, stroke, strokeWidth, fill, rx, ry, transform)** *add a rectangle* + + - x: number => Horizontal position from top left corner, default to 10 + - y: number => Vertical position from top left corner, default to 10 + - width: number => Width of the rectangle, default to 10 + - height: number => Height of the rectangle, default to 10 + - stroke: string => lines color, default to svg:create() parameter ("#000000" by default) + - strokeWidth: string => lines width, default to 1 + - fill: string => fill color, default to svg:create() parameter ("transparent" by default) + - rx: number => Horizontal raduis of the corners, default to 0 + - ry: number => Vertical radius of the corners, default to 0 + - tranform: string => transformation options (eg: rotation) + +**svg:addCircle(r, cx, cy, stroke, strokeWidth, fill, transform)** *add a circle* + + - r: number => circle radius, default to 25 + - cx: number => Horizontal position of the center, default to 30 + - cy: number => Vertical position of the center, default to 30 + - stroke: string => lines color, default to svg:create() parameter ("#000000" by default) + - strokeWidth: string => lines width, default to 1 + - fill: string => fill color, default to svg:create() parameter ("transparent" by default) + - tranform: string => transformation options (eg: rotation) + +**svg:addEllipse(cx, cy, rx, ry, stroke, strokeWidth, fill, transform)** *add an ellipse* + + - cx: number => Horizontal position of the center, default to 30 + - cy: number => Vertical position of the center, default to 30 + - rx: number => Horizontal radius of the ellipse, default to 25 + - ry: number => Vertical radius of the ellipse, default to 15 + - stroke: string => lines color, default to svg:create() parameter ("#000000" by default) + - strokeWidth: string => lines width, default to 1 + - fill: string => fill color, default to svg:create() parameter ("transparent" by default) + - tranform: string => transformation options (eg: rotation) + +**svg:addLine(x1, y1, x2, y2, stroke, strokeWidth, fill)** *add a line* + + - x1: number => Horizontal position of the center, default to 30 + - y1: number => Vertical position of the center, default to 30 + - x2: number => Horizontal radius of the ellipse, default to 25 + - y2: number => Vertical radius of the ellipse, default to 15 + - stroke: string => lines color, default to svg:create() parameter ("#000000" by default) + - strokeWidth: string => lines width, default to 1 + - fill: string => fill color, default to svg:create() parameter ("transparent" by default) + +**svg:addPolyline(points, stroke, strokeWidth, fill, transform)** *add a polyline* + + - points: string => all the points of the polyline with the standard svg format "x1,y1 x2,y2 x3,y3 ..." + - stroke: string => lines color + - strokeWidth: string => lines width + - fill: string => fill color + - tranform: string => transformation options (eg: rotation) + +**svg:addPath(d, stroke, strokeWidth, fill, transform)** *add a path* + + - d: string => standard svg parameters + - stroke: string => lines color + - strokeWidth: string => lines width + - fill: string => fill color + - tranform: string => transformation options (eg: rotation) + **svg:add(element)** *add an element to the drawing* - element: svg.Element => see farther for element list **svg:draw()** *return the svg formated string* -### Elements for svg:add(element) +### Elements for svg:add(element) or elements rendering only **svg:Text(text, x, y, style, transform)** *add text* @@ -128,10 +245,12 @@ If you installed luamin, you can use the script `minify.bat` included to minify - stroke: string => lines color - strokeWidth: string => lines width - fill: string => fill color + - tranform: string => transformation options (eg: rotation) **svg:Path(d, stroke, strokeWidth, fill, transform)** *add a path* - d: string => standard svg parameters - stroke: string => lines color - strokeWidth: string => lines width - - fill: string => fill color \ No newline at end of file + - fill: string => fill color + - tranform: string => transformation options (eg: rotation) \ No newline at end of file diff --git a/package.json b/package.json index 760efa5..6ae08d8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svg-lua", - "version": "0.8.1", + "version": "1.0.0", "description": "lua lib to create svg content", "main": "svg-min.lua", "repository": { diff --git a/svg-min.lua b/svg-min.lua index c5471d1..83837ba 100644 --- a/svg-min.lua +++ b/svg-min.lua @@ -1 +1 @@ -svg={}svg.__index=svg;function svg:create(a,b,c,d)local e={}setmetatable(e,svg)e.width=a or 100;e.height=height or 100;e.stroke=c or"#000000"e.fill=d or"transparent"e.elements={}e.Element={}e.Element.__index=svg.Element;function e.Element:create(f,g,h)local i={}setmetatable(i,e.Element)i.name=f;i.strElement="<"..f.." "for j,k in pairs(g)do i[j]=k;i.strElement=i.strElement..j.."=\""..k.."\" "end;if h~=nil then i.strElement=i.strElement..">"..h..""else i.strElement=i.strElement.."/>"end;return i end;return e end;function svg:add(l)table.insert(self.elements,l)end;function svg:draw()local m=""for n,o in pairs(self.elements)do m=m..o.strElement end;m=m..""return m end;function svg:Text(p,q,s,t,u)return self.Element:create("text",{x=q or 10,y=s or 50,style=t or"font-family: Verdana; font-size: 10; stroke: "..self.stroke.."; fill: "..self.fill..";",transform=u or""},p)end;function svg:Rect(q,s,a,height,c,v,d,w,x,u)return self.Element:create("rect",{x=q or 10,y=s or 10,width=a or 10,height=height or 10,stroke=c or self.stroke,fill=d or self.fill,["stroke-width"]=v or 1,rx=w or 0,ry=x or 0,transform=u or""})end;function svg:Circle(r,cx,cy,c,v,d,u)return self.Element:create("circle",{r=r or 25,cx=cx or 30,cy=cy or 30,stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:Ellipse(cx,cy,w,x,c,v,d,u)return self.Element:create("ellipse",{rx=r or 25,ry=r or 15,cx=cx or 30,cy=cy or 30,stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:Line(y,z,A,B,c,v,d)return self.Element:create("line",{x1=r or 15,y1=r or 15,x2=cx or 50,y2=cy or 45,stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill})end;function svg:Polyline(C,c,v,d,u)return self.Element:create("polyline",{points=C or"10,10 50,50 50,25 75,25",stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:Path(D,c,v,d,u)return self.Element:create("path",{d=D or"M50 0 L75 100 L25 100 Z",stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end +svg={}svg.__index=svg;function svg:create(a,b,c,d)local e={}setmetatable(e,svg)e.width=a or 100;e.height=height or 100;e.stroke=c or"#000000"e.fill=d or"transparent"e.elements={}e.Element={}e.Element.__index=svg.Element;function e.Element:create(f,g,h)local i={}setmetatable(i,e.Element)i.name=f;i.strElement="<"..f.." "for j,k in pairs(g)do i[j]=k;i.strElement=i.strElement..j.."=\""..k.."\" "end;if h~=nil then i.strElement=i.strElement..">"..h..""else i.strElement=i.strElement.."/>"end;return i end;return e end;function svg:add(l)table.insert(self.elements,l)end;function svg:draw()local m=""for n,o in pairs(self.elements)do m=m..o.strElement end;m=m..""return m end;function svg:Text(p,q,s,t,u)return self.Element:create("text",{x=q or 10,y=s or 50,style=t or"font-family: Verdana; font-size: 10; stroke: "..self.stroke.."; fill: "..self.fill..";",transform=u or""},p)end;function svg:addText(p,q,s,t,u)self:add(self:Text(p,q,s,t,u))end;function svg:Rect(q,s,a,height,c,v,d,w,x,u)return self.Element:create("rect",{x=q or 10,y=s or 10,width=a or 10,height=height or 10,stroke=c or self.stroke,fill=d or self.fill,["stroke-width"]=v or 1,rx=w or 0,ry=x or 0,transform=u or""})end;function svg:addRect(q,s,a,height,c,v,d,w,x,u)self:add(self:Rect(q,s,a,height,c,v,d,w,x,u))end;function svg:Circle(r,cx,cy,c,v,d,u)return self.Element:create("circle",{r=r or 25,cx=cx or 30,cy=cy or 30,stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:addCircle(r,cx,cy,c,v,d,u)self:add(self:Circle(r,cx,cy,c,v,d,u))end;function svg:Ellipse(cx,cy,w,x,c,v,d,u)return self.Element:create("ellipse",{rx=r or 25,ry=r or 15,cx=cx or 30,cy=cy or 30,stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:addEllipse(cx,cy,w,x,c,v,d,u)self:add(self:Ellipse(cx,cy,w,x,c,v,d,u))end;function svg:Line(y,z,A,B,c,v,d)return self.Element:create("line",{x1=r or 15,y1=r or 15,x2=cx or 50,y2=cy or 45,stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill})end;function svg:addLine(y,z,A,B,c,v,d)self:add(self:Line(y,z,A,B,c,v,d))end;function svg:Polyline(C,c,v,d,u)return self.Element:create("polyline",{points=C or"10,10 50,50 50,25 75,25",stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:addPolyline(C,c,v,d,u)self:add(self:Polyline(C,c,v,d,u))end;function svg:Path(D,c,v,d,u)return self.Element:create("path",{d=D or"M50 0 L75 100 L25 100 Z",stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:addPath(D,c,v,d,u)self:add(self:Path(D,c,v,d,u))end diff --git a/svg.lua b/svg.lua index 3593551..9e3d7fb 100644 --- a/svg.lua +++ b/svg.lua @@ -74,6 +74,9 @@ function svg:Text(text, x, y, style, transform) transform = transform or "" }, text) end +function svg:addText(text, x, y, style, transform) + self:add(self:Text(text, x, y, style, transform)) +end -- function to create a rectangle -- x: number => Position du rectangle sur l'axe horizontal par rapport au coin supérieur gauche @@ -100,6 +103,9 @@ function svg:Rect(x, y, width, height, stroke, strokeWidth, fill, rx, ry, transf transform = transform or "" }) end +function svg:addRect(x, y, width, height, stroke, strokeWidth, fill, rx, ry, transform) + self:add(self:Rect(x, y, width, height, stroke, strokeWidth, fill, rx, ry, transform)) +end -- function to create a circle -- r: number => circle radius @@ -120,6 +126,9 @@ function svg:Circle(r, cx, cy, stroke, strokeWidth, fill, transform) transform = transform or "" }) end +function svg:addCircle(r, cx, cy, stroke, strokeWidth, fill, transform) + self:add(self:Circle(r, cx, cy, stroke, strokeWidth, fill, transform)) +end -- function to create an ellipse -- cx: number => Horizontal position of the center @@ -142,6 +151,9 @@ function svg:Ellipse(cx, cy, rx, ry, stroke, strokeWidth, fill, transform) transform = transform or "" }) end +function svg:addEllipse(cx, cy, rx, ry, stroke, strokeWidth, fill, transform) + self:add(self:Ellipse(cx, cy, rx, ry, stroke, strokeWidth, fill, transform)) +end -- function ro create a line -- c1: number => Horizontal postion for point 1 @@ -162,6 +174,10 @@ function svg:Line(x1, y1, x2, y2, stroke, strokeWidth, fill) fill = fill or self.fill }) end +function svg:addLine(x1, y1, x2, y2, stroke, strokeWidth, fill) + self:add(self:Line(x1, y1, x2, y2, stroke, strokeWidth, fill)) +end + -- function ro create a polyline -- points: string => all the points of the polyline with the standard svg format "x1,y1 x2,y2 x3,y3 ..." @@ -177,6 +193,9 @@ function svg:Polyline(points, stroke, strokeWidth, fill, transform) transform = transform or "" }) end +function svg:addPolyline(points, stroke, strokeWidth, fill, transform) + self:add(self:Polyline(points, stroke, strokeWidth, fill, transform)) +end -- function ro create a polyline -- points: string => all the points of the polyline with the standard svg format "x1,y1 x2,y2 x3,y3 ..." @@ -192,3 +211,6 @@ function svg:Path(d, stroke, strokeWidth, fill, transform) transform = transform or "" }) end +function svg:addPath(d, stroke, strokeWidth, fill, transform) + self:add(self:Path(d, stroke, strokeWidth, fill, transform)) +end \ No newline at end of file diff --git a/test.lua b/test.lua index 44b14f2..2c8f401 100644 --- a/test.lua +++ b/test.lua @@ -7,11 +7,11 @@ require "svg-min" -- TEST IS STARTING HERE -- YOU CAN MODIFY IT -- mon_dessin = svg:create() -mon_dessin:add(mon_dessin:Text("Hello World !!")) -mon_dessin:add(mon_dessin:Rect()) -mon_dessin:add(mon_dessin:Circle()) -mon_dessin:add(mon_dessin:Ellipse()) -mon_dessin:add(mon_dessin:Line()) -mon_dessin:add(mon_dessin:Polyline()) -mon_dessin:add(mon_dessin:Path()) +mon_dessin:addText("Hello World !!") +mon_dessin:addRect() +mon_dessin:addCircle() +mon_dessin:addEllipse() +mon_dessin:addLine() +mon_dessin:addPolyline() +mon_dessin:addPath() print(mon_dessin:draw()) \ No newline at end of file