Add miniPaint as new frontend base
This commit is contained in:
@@ -0,0 +1,99 @@
|
||||
import Base_tools_class from './../../core/base-tools.js';
|
||||
import Base_layers_class from './../../core/base-layers.js';
|
||||
|
||||
class Callout_class extends Base_tools_class {
|
||||
|
||||
constructor(ctx) {
|
||||
super();
|
||||
this.Base_layers = new Base_layers_class();
|
||||
this.ctx = ctx;
|
||||
this.name = 'callout';
|
||||
this.layer = {};
|
||||
this.best_ratio = 1.3;
|
||||
this.snap_line_info = {x: null, y: null};
|
||||
}
|
||||
|
||||
load() {
|
||||
this.default_events();
|
||||
}
|
||||
|
||||
mousedown(e) {
|
||||
this.shape_mousedown(e);
|
||||
}
|
||||
|
||||
mousemove(e) {
|
||||
this.shape_mousemove(e);
|
||||
}
|
||||
|
||||
mouseup(e) {
|
||||
this.shape_mouseup(e);
|
||||
}
|
||||
|
||||
render_overlay(ctx){
|
||||
var ctx = this.Base_layers.ctx;
|
||||
this.render_overlay_parent(ctx);
|
||||
}
|
||||
|
||||
demo(ctx, x, y, width, height) {
|
||||
ctx.fillStyle = '#aaa';
|
||||
ctx.strokeStyle = '#555';
|
||||
ctx.lineWidth = 2;
|
||||
|
||||
var width_all = width + x * 2;
|
||||
width = height * this.best_ratio;
|
||||
x = (width_all - width) / 2;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(x + width / 2, y + height / 2);
|
||||
this.draw_shape(ctx, -width / 2, -height / 2, width, height);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
render(ctx, layer) {
|
||||
var params = layer.params;
|
||||
var fill = params.fill;
|
||||
|
||||
ctx.save();
|
||||
|
||||
//set styles
|
||||
ctx.strokeStyle = 'transparent';
|
||||
ctx.fillStyle = 'transparent';
|
||||
if(params.border)
|
||||
ctx.strokeStyle = params.border_color;
|
||||
if(params.fill)
|
||||
ctx.fillStyle = params.fill_color;
|
||||
ctx.lineWidth = params.border_size;
|
||||
|
||||
//draw with rotation support
|
||||
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
|
||||
ctx.rotate(layer.rotate * Math.PI / 180);
|
||||
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height);
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
draw_shape(ctx, x, y, width, height, coords) {
|
||||
ctx.lineJoin = "round";
|
||||
|
||||
ctx.beginPath();
|
||||
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x + width, y);
|
||||
ctx.lineTo(x + width, y + height * 0.6);
|
||||
|
||||
ctx.lineTo(x + width / 2 + width / 10, y + height * 0.6);
|
||||
ctx.lineTo(x + width / 8, y + height);
|
||||
ctx.lineTo(x + width / 2 - width / 10, y + height * 0.6);
|
||||
|
||||
ctx.lineTo(x, y + height * 0.6);
|
||||
ctx.lineTo(x, y);
|
||||
|
||||
ctx.closePath();
|
||||
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Callout_class;
|
||||
Reference in New Issue
Block a user