Curve tool
parent
e38cd87fb6
commit
6bf4a2123a
|
@ -325,6 +325,7 @@ function deselect(){
|
|||
textbox.destroy();
|
||||
texbox = null;
|
||||
}
|
||||
selected_tool.end && selected_tool.end();
|
||||
}
|
||||
function delete_selection(){
|
||||
if(selection){
|
||||
|
|
|
@ -106,10 +106,11 @@ function draw_line(ctx, x1, y1, x2, y2){
|
|||
ctx.fillRect(x, y, 1, 1);
|
||||
});
|
||||
}else{
|
||||
ctx.lineCap = "round";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.lineTo(x2, y2);
|
||||
|
||||
ctx.lineCap = "round";
|
||||
ctx.stroke();
|
||||
ctx.lineCap = "butt";
|
||||
}
|
||||
|
|
69
tools.js
69
tools.js
|
@ -316,11 +316,66 @@ tools = [{
|
|||
name: "Curve",
|
||||
description: "Draws a curved line with the selected line width.",
|
||||
cursor: ["precise", [16, 16], "crosshair"],
|
||||
implemented: false,
|
||||
stroke_only: true,
|
||||
shape: function(ctx, x, y, w, h){
|
||||
draw_line(ctx, x, y, x+w, y+h);
|
||||
points: [],
|
||||
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
|
||||
}, {
|
||||
name: "Rectangle",
|
||||
|
@ -339,7 +394,6 @@ tools = [{
|
|||
name: "Polygon",
|
||||
description: "Draws a polygon with the selected fill style.",
|
||||
cursor: ["precise", [16, 16], "crosshair"],
|
||||
implemented: false,
|
||||
points: [],
|
||||
last_click: {x: 0, y: 0, time: 0},//for double-clicking
|
||||
passive: function(){
|
||||
|
@ -380,7 +434,7 @@ tools = [{
|
|||
this.points[i].y = y;
|
||||
|
||||
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++){
|
||||
ctx.lineTo(this.points[i].x, this.points[i].y);
|
||||
}
|
||||
|
@ -392,7 +446,7 @@ tools = [{
|
|||
if(this.points.length < 1){ return; }
|
||||
|
||||
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++){
|
||||
ctx.lineTo(this.points[i].x, this.points[i].y);
|
||||
}
|
||||
|
@ -405,6 +459,9 @@ tools = [{
|
|||
cancel: function(){
|
||||
this.points = [];
|
||||
},
|
||||
end: function(){
|
||||
this.points = [];
|
||||
},
|
||||
shape: function(){true},
|
||||
$options: $ChooseShapeStyle()
|
||||
}, {
|
||||
|
|
Loading…
Reference in New Issue