Curve tool
parent
e38cd87fb6
commit
6bf4a2123a
|
@ -325,6 +325,7 @@ function deselect(){
|
||||||
textbox.destroy();
|
textbox.destroy();
|
||||||
texbox = null;
|
texbox = null;
|
||||||
}
|
}
|
||||||
|
selected_tool.end && selected_tool.end();
|
||||||
}
|
}
|
||||||
function delete_selection(){
|
function delete_selection(){
|
||||||
if(selection){
|
if(selection){
|
||||||
|
|
|
@ -106,10 +106,11 @@ function draw_line(ctx, x1, y1, x2, y2){
|
||||||
ctx.fillRect(x, y, 1, 1);
|
ctx.fillRect(x, y, 1, 1);
|
||||||
});
|
});
|
||||||
}else{
|
}else{
|
||||||
ctx.lineCap = "round";
|
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(x1, y1);
|
ctx.moveTo(x1, y1);
|
||||||
ctx.lineTo(x2, y2);
|
ctx.lineTo(x2, y2);
|
||||||
|
|
||||||
|
ctx.lineCap = "round";
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
ctx.lineCap = "butt";
|
ctx.lineCap = "butt";
|
||||||
}
|
}
|
||||||
|
|
69
tools.js
69
tools.js
|
@ -316,11 +316,66 @@ tools = [{
|
||||||
name: "Curve",
|
name: "Curve",
|
||||||
description: "Draws a curved line with the selected line width.",
|
description: "Draws a curved line with the selected line width.",
|
||||||
cursor: ["precise", [16, 16], "crosshair"],
|
cursor: ["precise", [16, 16], "crosshair"],
|
||||||
implemented: false,
|
|
||||||
stroke_only: true,
|
stroke_only: true,
|
||||||
shape: function(ctx, x, y, w, h){
|
points: [],
|
||||||
draw_line(ctx, x, y, x+w, y+h);
|
passive: function(){
|
||||||
|
// actions are passive if you've already started using the tool
|
||||||
|
// but the first action should be undoable
|
||||||
|
return this.points.length > 0;
|
||||||
},
|
},
|
||||||
|
mouseup: function(ctx, x, y){
|
||||||
|
if(this.points.length >= 4){
|
||||||
|
this.points = [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mousedown: function(ctx, x, y){
|
||||||
|
if(this.points.length < 1){
|
||||||
|
var thine = this;
|
||||||
|
undoable(function(){//=>
|
||||||
|
thine.points.push({x: x, y: y});
|
||||||
|
//second point so first action draws a line
|
||||||
|
thine.points.push({x: x, y: y});
|
||||||
|
});
|
||||||
|
}else{
|
||||||
|
this.points.push({x: x, y: y});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
paint: function(ctx, x, y){
|
||||||
|
if(this.points.length < 1){ return; }
|
||||||
|
|
||||||
|
var i = this.points.length - 1;
|
||||||
|
this.points[i].x = x;
|
||||||
|
this.points[i].y = y;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(this.points[0].x, this.points[0].y);
|
||||||
|
if(this.points.length === 4){
|
||||||
|
ctx.bezierCurveTo(
|
||||||
|
this.points[2].x, this.points[2].y,
|
||||||
|
this.points[3].x, this.points[3].y,
|
||||||
|
this.points[1].x, this.points[1].y
|
||||||
|
);
|
||||||
|
}else if(this.points.length === 3){
|
||||||
|
ctx.quadraticCurveTo(
|
||||||
|
this.points[2].x, this.points[2].y,
|
||||||
|
this.points[1].x, this.points[1].y
|
||||||
|
);
|
||||||
|
}else{
|
||||||
|
ctx.lineTo(
|
||||||
|
this.points[1].x, this.points[1].y
|
||||||
|
);
|
||||||
|
}
|
||||||
|
ctx.lineCap = "round";
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.lineCap = "butt";
|
||||||
|
},
|
||||||
|
cancel: function(){
|
||||||
|
this.points = [];
|
||||||
|
},
|
||||||
|
end: function(){
|
||||||
|
this.points = [];
|
||||||
|
},
|
||||||
|
shape: function(){true},
|
||||||
$options: $choose_stroke_size
|
$options: $choose_stroke_size
|
||||||
}, {
|
}, {
|
||||||
name: "Rectangle",
|
name: "Rectangle",
|
||||||
|
@ -339,7 +394,6 @@ tools = [{
|
||||||
name: "Polygon",
|
name: "Polygon",
|
||||||
description: "Draws a polygon with the selected fill style.",
|
description: "Draws a polygon with the selected fill style.",
|
||||||
cursor: ["precise", [16, 16], "crosshair"],
|
cursor: ["precise", [16, 16], "crosshair"],
|
||||||
implemented: false,
|
|
||||||
points: [],
|
points: [],
|
||||||
last_click: {x: 0, y: 0, time: 0},//for double-clicking
|
last_click: {x: 0, y: 0, time: 0},//for double-clicking
|
||||||
passive: function(){
|
passive: function(){
|
||||||
|
@ -380,7 +434,7 @@ tools = [{
|
||||||
this.points[i].y = y;
|
this.points[i].y = y;
|
||||||
|
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(this.points[0].x, this.points[0].y)
|
ctx.moveTo(this.points[0].x, this.points[0].y);
|
||||||
for(var i=1; i<this.points.length; i++){
|
for(var i=1; i<this.points.length; i++){
|
||||||
ctx.lineTo(this.points[i].x, this.points[i].y);
|
ctx.lineTo(this.points[i].x, this.points[i].y);
|
||||||
}
|
}
|
||||||
|
@ -392,7 +446,7 @@ tools = [{
|
||||||
if(this.points.length < 1){ return; }
|
if(this.points.length < 1){ return; }
|
||||||
|
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(this.points[0].x, this.points[0].y)
|
ctx.moveTo(this.points[0].x, this.points[0].y);
|
||||||
for(var i=1; i<this.points.length; i++){
|
for(var i=1; i<this.points.length; i++){
|
||||||
ctx.lineTo(this.points[i].x, this.points[i].y);
|
ctx.lineTo(this.points[i].x, this.points[i].y);
|
||||||
}
|
}
|
||||||
|
@ -405,6 +459,9 @@ tools = [{
|
||||||
cancel: function(){
|
cancel: function(){
|
||||||
this.points = [];
|
this.points = [];
|
||||||
},
|
},
|
||||||
|
end: function(){
|
||||||
|
this.points = [];
|
||||||
|
},
|
||||||
shape: function(){true},
|
shape: function(){true},
|
||||||
$options: $ChooseShapeStyle()
|
$options: $ChooseShapeStyle()
|
||||||
}, {
|
}, {
|
||||||
|
|
Loading…
Reference in New Issue