Progress on Vector tool

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

View File

@ -35,7 +35,7 @@ Missing documentation.
### | Overlay ### | Overlay
Missing documentation. Missing documentation.
- Parameters: `Position` `Rect` - Parameters: `Position` `Rect` `Color`
- Variables: - Variables:
### % Render ### % Render
@ -70,8 +70,8 @@ Missing documentation.
### + Vector ### + Vector
Missing documentation. Missing documentation.
- Parameters: `Any` `Position` - Parameters: `Any`
- Variables: - Variables: `fill_color` `stroke_width` `stroke_color` `line_cap`
### ? Help ### ? Help
Missing documentation. Missing documentation.
@ -115,5 +115,18 @@ rate=10 ; variable: rate = 10
## Templates ## Templates
### Watermark ### 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
``` ```

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;"> <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,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>
<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>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 526 B

After

Width:  |  Height:  |  Size: 426 B

View File

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

View File

@ -64,6 +64,13 @@ function Help(rune)
html += "## Templates\n"; html += "## Templates\n";
html += "### Watermark\n"; html += "### Watermark\n";
html += "```\n# 1280x720 ; / ../assets/photo.jpg 1280x 0,0 ; / ../assets/logo.png 60x60 20,640\n```\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; return html;
} }

View File

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

View File

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

View File

@ -2,33 +2,36 @@ function Vector(rune)
{ {
Module.call(this,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 // Module
this.passive = function(cmd) this.passive = function(cmd)
{ {
ronin.overlay.clear(); console.log(cmd.variable("stroke_width"));
ronin.overlay.context().lineCap="round"; this.layer.clear();
ronin.overlay.context().lineWidth = ronin.brush.size; this.layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "round";
ronin.overlay.context().strokeStyle = "red"; this.layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : ronin.brush.size;
ronin.overlay.context().stroke(new Path2D(cmd.content.join(" "))); 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) this.active = function(cmd)
{ {
ronin.overlay.clear(); this.layer.clear();
ronin.surface.context().lineCap="round"; ronin.surface.active_layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "round";
ronin.surface.context().lineWidth = ronin.brush.size; ronin.surface.active_layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : ronin.brush.size;
ronin.surface.context().strokeStyle = ronin.brush.color.rgba(); ronin.surface.active_layer.context().strokeStyle = cmd.variable("stroke_color") ? cmd.variable("stroke_color").value : "#ffffff";
ronin.surface.context().stroke(new Path2D(cmd.content.join(" "))); 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
} }