dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress on Vector tool

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-01-17 09:43:37 -07:00
parent 35edb43503
commit cd54661b3a
7 changed files with 59 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@ -35,7 +35,7 @@ Missing documentation.
### | Overlay
Missing documentation.
- Parameters: `Position` `Rect`
- Parameters: `Position` `Rect` `Color`
- Variables:
### % Render
@ -70,8 +70,8 @@ Missing documentation.
### + Vector
Missing documentation.
- Parameters: `Any` `Position`
- Variables:
- Parameters: `Any`
- Variables: `fill_color` `stroke_width` `stroke_color` `line_cap`
### ? Help
Missing documentation.
@ -115,5 +115,18 @@ rate=10 ; variable: rate = 10
## Templates
### Watermark
```
# 1280x720 ; / ../assets/photo.jpg 1280x 0,0 ; / ../assets/logo.png 60x60 20,620
# 1280x720 ; / ../assets/photo.jpg 1280x 0,0 ; / ../assets/logo.png 60x60 20,640
```
## vectors
### Ronin Logo
```
+ M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246 stroke_width=45 line_cap=square stroke_color=black
```
### A Circle
```
+ M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0
```
### Many Circles
```
+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -25, 0 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -15, 0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;+ M 64, 64 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0
```

7
sources/media/graphics/logo.svg
View File

@ -1,8 +1,3 @@
<svg class="vector" width="300px" height="300px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" style="width: 300px;height: 300px;stroke: #fff;stroke-width: 45px;fill: none;stroke-linecap: square;">
<path d="M150,53 A-96,97 0 0,0 246,150"></path>
<path d="M150,246 A97,-96 0 0,0 53,150"></path>
<path d="M53,101 A-48,-48 0 0,0 101,53"></path>
<path d="M246,101 A48,-48 0 0,1 198,53"></path>
<path d="M53,198 A-48,48 0 0,1 101,246"></path>
<path d="M246,198 A48,48 0 0,0 198,246"></path>
<path d="M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246"></path>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 526 B

After

Width:  |  Height:  |  Size: 426 B

5
sources/scripts/core/init.js
View File

@ -35,7 +35,8 @@ starting_canvas.height = parseInt(starting_canvas.height/40) * 40;
commander.query("~ "+ronin.timestamp());
commander.query("# "+starting_canvas.render());
commander.query("# layer=background");
commander.query("# layer=Background");
commander.query("# #ff0000");
commander.query("# layer=main");
commander.query("# layer=Main");
commander.query("> 1 ; > 0,0 ; > 1,1 ; > #ffffff");
commander.query("~ Ready.");

7
sources/scripts/modules/help.js
View File

@ -64,6 +64,13 @@ function Help(rune)
html += "## Templates\n";
html += "### Watermark\n";
html += "```\n# 1280x720 ; / ../assets/photo.jpg 1280x 0,0 ; / ../assets/logo.png 60x60 20,640\n```\n";
html += "## vectors\n";
html += "### Ronin Logo\n";
html += "```\n+ M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246 stroke_width=45 line_cap=square stroke_color=black\n```\n";
html += "### A Circle\n";
html += "```\n+ M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0\n```\n";
html += "### Many Circles\n";
html += "```\n+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -25, 0 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -15, 0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;+ M 64, 64 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0\n```\n";
return html;
}

2
sources/scripts/modules/overlay.js
View File

@ -4,7 +4,7 @@ function Overlay(rune)
this.parameters = [Position,Rect,Color];
this.color = new Color("#ff00ff");
this.color = new Color("#ffffff");
this.layer = null;
this.install = function()

13
sources/scripts/modules/stroke.js
View File

@ -20,12 +20,13 @@ function Stroke(rune)
this.save_stroke = function(mode)
{
s = "_ module="+mode+" ";
for (i = 0; i < this.positions.length; i++) {
s += this.positions[i].render()+" ";
}
if(this.positions.length > 0){ ronin.history.add(s); }
this.positions = null;
// TODO
// s = "_ module="+mode+" ";
// for (i = 0; i < this.positions.length; i++) {
// s += this.positions[i].render()+" ";
// }
// if(this.positions.length > 0){ ronin.history.add(s); }
// this.positions = null;
}
// Module

41
sources/scripts/modules/vector.js
View File

@ -2,33 +2,36 @@ function Vector(rune)
{
Module.call(this,rune);
this.parameters = [Any,Position];
this.parameters = [Any];
this.variables = {"fill_color" : "none","stroke_width" : 2,"stroke_color" : "#ffffff", "line_cap" : "square"};
this.layer = null;
this.install = function()
{
this.layer = new Layer("Preview",this);
this.layer.element.setAttribute("style","z-index:8000");
ronin.surface.add_layer(this.layer);
}
// Module
this.passive = function(cmd)
{
ronin.overlay.clear();
ronin.overlay.context().lineCap="round";
ronin.overlay.context().lineWidth = ronin.brush.size;
ronin.overlay.context().strokeStyle = "red";
ronin.overlay.context().stroke(new Path2D(cmd.content.join(" ")));
console.log(cmd.variable("stroke_width"));
this.layer.clear();
this.layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "round";
this.layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : ronin.brush.size;
this.layer.context().strokeStyle = cmd.variable("stroke_color") ? cmd.variable("stroke_color").value : "#ffffff";
this.layer.context().stroke(new Path2D(cmd.content.join(" ")));
}
this.active = function(cmd)
{
ronin.overlay.clear();
ronin.surface.context().lineCap="round";
ronin.surface.context().lineWidth = ronin.brush.size;
ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
ronin.surface.context().stroke(new Path2D(cmd.content.join(" ")));
this.layer.clear();
ronin.surface.active_layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "round";
ronin.surface.active_layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : ronin.brush.size;
ronin.surface.active_layer.context().strokeStyle = cmd.variable("stroke_color") ? cmd.variable("stroke_color").value : "#ffffff";
ronin.surface.active_layer.context().stroke(new Path2D(cmd.content.join(" ")));
}
// + M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 ; Draw a circle
// M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z
// Large 128
// @ 128x128;> 2 #ffffff;+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -25, 0 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -15, 0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;+ M 64, 64 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0;$ logo
// Icon 128
// @ 128x128;> 4 #ffffff;+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;$ logo
}