Get rid of "continuous" from interface
parent
6d7220f60e
commit
9936034dc0
14
src/app.js
14
src/app.js
|
@ -526,16 +526,8 @@ function tool_go(selected_tool, event_name){
|
||||||
selected_tool[event_name](ctx, pointer.x, pointer.y);
|
selected_tool[event_name](ctx, pointer.x, pointer.y);
|
||||||
}
|
}
|
||||||
if(selected_tool.paint){
|
if(selected_tool.paint){
|
||||||
// TODO: get rid of "continous" from the interface
|
|
||||||
if(selected_tool.continuous === "space"){
|
|
||||||
const iterate_line = brush_shape.match(/diagonal/) ? brosandham_line : bresenham_line;
|
|
||||||
iterate_line(pointer_previous.x, pointer_previous.y, pointer.x, pointer.y, (x, y) => {
|
|
||||||
selected_tool.paint(ctx, x, y);
|
|
||||||
});
|
|
||||||
}else{
|
|
||||||
selected_tool.paint(ctx, pointer.x, pointer.y);
|
selected_tool.paint(ctx, pointer.x, pointer.y);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
function canvas_pointer_move(e){
|
function canvas_pointer_move(e){
|
||||||
ctrl = e.ctrlKey;
|
ctrl = e.ctrlKey;
|
||||||
|
@ -718,8 +710,10 @@ $canvas.on("pointerdown", e => {
|
||||||
if(selected_tool.paint || selected_tool.pointerdown){
|
if(selected_tool.paint || selected_tool.pointerdown){
|
||||||
tool_go(selected_tool, "pointerdown");
|
tool_go(selected_tool, "pointerdown");
|
||||||
}
|
}
|
||||||
if(selected_tool.continuous === "time"){
|
if(selected_tool.paint_on_time_interval != null){
|
||||||
interval_ids.push(setInterval(()=> { tool_go(selected_tool); }, 5));
|
interval_ids.push(setInterval(()=> {
|
||||||
|
tool_go(selected_tool);
|
||||||
|
}, selected_tool.paint_on_time_interval));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
26
src/tools.js
26
src/tools.js
|
@ -33,11 +33,8 @@ window.tools = [{
|
||||||
|
|
||||||
// End prior selection, drawing it to the canvas
|
// End prior selection, drawing it to the canvas
|
||||||
deselect();
|
deselect();
|
||||||
|
},
|
||||||
// The inverty brush is continuous in space which means
|
paint(ctx, x, y) {
|
||||||
// paint(ctx, x, y) will be called for each pixel the pointer moves
|
|
||||||
// and we only need to record individual pointer events to make the polygon
|
|
||||||
const onpointermove = e => {
|
|
||||||
const pointer = to_canvas_coords(e);
|
const pointer = to_canvas_coords(e);
|
||||||
// Constrain the pointer to the canvas
|
// Constrain the pointer to the canvas
|
||||||
pointer.x = Math.min(canvas.width, pointer.x);
|
pointer.x = Math.min(canvas.width, pointer.x);
|
||||||
|
@ -51,15 +48,10 @@ window.tools = [{
|
||||||
this.x_max = Math.max(pointer.x, this.x_max);
|
this.x_max = Math.max(pointer.x, this.x_max);
|
||||||
this.y_min = Math.min(pointer.y, this.y_min);
|
this.y_min = Math.min(pointer.y, this.y_min);
|
||||||
this.y_max = Math.max(pointer.y, this.y_max);
|
this.y_max = Math.max(pointer.y, this.y_max);
|
||||||
};
|
|
||||||
$G.on("pointermove", onpointermove);
|
|
||||||
$G.one("pointerup", () => {
|
|
||||||
$G.off("pointermove", onpointermove);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
continuous: "space",
|
|
||||||
paint(ctx, x, y) {
|
|
||||||
|
|
||||||
|
bresenham_line(pointer_previous.x, pointer_previous.y, pointer.x, pointer.y, this.paint_iteration);
|
||||||
|
},
|
||||||
|
paint_iteration(x, y) {
|
||||||
// Constrain the inverty paint brush position to the canvas
|
// Constrain the inverty paint brush position to the canvas
|
||||||
x = Math.min(canvas.width, x);
|
x = Math.min(canvas.width, x);
|
||||||
x = Math.max(0, x);
|
x = Math.max(0, x);
|
||||||
|
@ -215,7 +207,6 @@ window.tools = [{
|
||||||
help_icon: "p_erase.gif",
|
help_icon: "p_erase.gif",
|
||||||
description: "Erases a portion of the picture, using the selected eraser shape.",
|
description: "Erases a portion of the picture, using the selected eraser shape.",
|
||||||
cursor: ["precise", [16, 16], "crosshair"],
|
cursor: ["precise", [16, 16], "crosshair"],
|
||||||
continuous: "space",
|
|
||||||
|
|
||||||
// binary mask of the drawn area, either opaque white or transparent
|
// binary mask of the drawn area, either opaque white or transparent
|
||||||
mask_canvas: null,
|
mask_canvas: null,
|
||||||
|
@ -306,6 +297,11 @@ window.tools = [{
|
||||||
this.mask_canvas = null;
|
this.mask_canvas = null;
|
||||||
},
|
},
|
||||||
paint(ctx, x, y) {
|
paint(ctx, x, y) {
|
||||||
|
bresenham_line(pointer_previous.x, pointer_previous.y, pointer.x, pointer.y, (x, y)=> {
|
||||||
|
this.paint_iteration(ctx, x, y);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
paint_iteration(ctx, x, y) {
|
||||||
|
|
||||||
const rect_x = ~~(x - eraser_size/2);
|
const rect_x = ~~(x - eraser_size/2);
|
||||||
const rect_y = ~~(y - eraser_size/2);
|
const rect_y = ~~(y - eraser_size/2);
|
||||||
|
@ -553,7 +549,7 @@ window.tools = [{
|
||||||
help_icon: "p_airb.gif",
|
help_icon: "p_airb.gif",
|
||||||
description: "Draws using an airbrush of the selected size.",
|
description: "Draws using an airbrush of the selected size.",
|
||||||
cursor: ["airbrush", [7, 22], "crosshair"],
|
cursor: ["airbrush", [7, 22], "crosshair"],
|
||||||
continuous: "time",
|
paint_on_time_interval: 5,
|
||||||
paint_mask(ctx, x, y) {
|
paint_mask(ctx, x, y) {
|
||||||
const r = airbrush_size / 2;
|
const r = airbrush_size / 2;
|
||||||
for(let i = 0; i < 6 + r/5; i++){
|
for(let i = 0; i < 6 + r/5; i++){
|
||||||
|
|
Loading…
Reference in New Issue