Skip to content

Commit

Permalink
add comment shape and some properties for shapes
Browse files Browse the repository at this point in the history
  • Loading branch information
@GHarutyunyan
GHarutyunyan committed Apr 3, 2020
1 parent a787be8 commit d8d6ca9
Show file tree
Hide file tree
Showing 5 changed files with 239 additions and 138 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-image-markup",
"version": "2.0.9",
"version": "3.0.0",
"description": "vue-image-markup will provide you to edit uploaded image easily and save it.",
"main": "src/Editor.vue",
"repository": {
Expand Down
44 changes: 43 additions & 1 deletion src/Editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@
radius: (params && params.radius) ? params.radius : 20,
strokeUniform: (params && params.strokeUniform) ? params.strokeUniform : true,
noScaleCache: (params && params.noScaleCache) ? params.noScaleCache : false,
strokeDashArray: (params && params.strokeDashArray) ? params.strokeDashArray : false
};
this.customCircle(type, this.params);
break;
Expand All @@ -149,10 +150,50 @@
opacity: (params && params.opacity) ? params.opacity : 1,
strokeUniform: (params && params.strokeUniform) ? params.strokeUniform : true,
noScaleCache: (params && params.noScaleCache) ? params.noScaleCache : false,
strokeDashArray: (params && params.strokeDashArray) ? params.strokeDashArray : false,
borderRadius: (params && params.borderRadius) ? params.borderRadius : 0
};
this.customRect(type, this.params);
break;
case "comment":
this.cancelCroppingImage();
this.currentActiveTool = type;
this.params = {
fill: (params && params.fill) ? params.fill : 'transparent',
stroke: (params && params.stroke) ? params.stroke : this.color,
strokeWidth: (params && params.strokeWidth) ? params.strokeWidth : this.strokeWidth,
angle: (params && params.angle) ? params.angle : 0,
width: (params && params.width) ? params.width : null,
height: (params && params.height) ? params.height : null,
top: (params && params.top) ? params.top : 0,
left: (params && params.left) ? params.left : 0,
opacity: (params && params.opacity) ? params.opacity : 1,
strokeUniform: (params && params.strokeUniform) ? params.strokeUniform : true,
noScaleCache: (params && params.noScaleCache) ? params.noScaleCache : false,
strokeDashArray: (params && params.strokeDashArray) ? params.strokeDashArray : false,
borderRadius: (params && params.borderRadius) ? params.borderRadius : 0
};
this.customRect(type, this.params);
break;
case "line":
this.cancelCroppingImage();
this.currentActiveTool = type;
this.params = {
fill: (params && params.fill) ? params.fill : 'transparent',
stroke: (params && params.stroke) ? params.stroke : this.color,
strokeWidth: (params && params.strokeWidth) ? params.strokeWidth : this.strokeWidth,
angle: (params && params.angle) ? params.angle : 0,
width: (params && params.width) ? params.width : null,
height: (params && params.height) ? params.height : null,
top: (params && params.top) ? params.top : 0,
left: (params && params.left) ? params.left : 0,
opacity: (params && params.opacity) ? params.opacity : 1,
strokeUniform: (params && params.strokeUniform) ? params.strokeUniform : true,
noScaleCache: (params && params.noScaleCache) ? params.noScaleCache : false,
strokeDashArray: (params && params.strokeDashArray) ? params.strokeDashArray : false
};
this.customRect(type, this.params);
break;
case 'selectMode':
this.currentActiveTool = type;
this.drag();
Expand All @@ -166,6 +207,7 @@
strokeWidth: (params && params.strokeWidth) ? params.strokeWidth : this.strokeWidth,
strokeUniform: (params && params.strokeUniform) ? params.strokeUniform : true,
noScaleCache: (params && params.noScaleCache) ? params.noScaleCache : false,
strokeDashArray: (params && params.strokeDashArray) ? params.strokeDashArray : false
};
this.drawArrow(this.params);
break;
Expand Down
97 changes: 51 additions & 46 deletions src/assets/js/arrow.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
import {fabric} from 'fabric';
import CanvasHistory from "./canvasHistory";

let params;
fabric.LineArrow = fabric.util.createClass(fabric.Line, {

type: 'lineArrow',

initialize: function(element, options) {
initialize: function (element, options) {
params = options;
options || (options = {});
this.callSuper('initialize', element, options);
},

toObject: function() {
toObject: function () {
return fabric.util.object.extend(this.callSuper('toObject'));
},

_render: function(ctx) {
_render: function (ctx) {
console.log('render', params);
this.ctx = ctx;
this.callSuper('_render', ctx);
let p = this.calcLinePoints();
Expand All @@ -25,19 +28,19 @@ fabric.LineArrow = fabric.util.createClass(fabric.Line, {
xDiff = -this.x2 + this.x1;
yDiff = -this.y2 + this.y1;
angle = Math.atan2(yDiff, xDiff);
this.drawArrow(angle, p.x1, p.y1,this.heads[1]);
this.drawArrow(angle, p.x1, p.y1, this.heads[1]);
},

drawArrow: function(angle, xPos, yPos, head) {
drawArrow: function (angle, xPos, yPos, head) {
this.ctx.save();

if (head) {
this.ctx.translate(xPos, yPos);
this.ctx.rotate(angle);
this.ctx.beginPath();
this.ctx.moveTo(10, 0);
this.ctx.lineTo(-15, 15);
this.ctx.lineTo(-15, -15);
let width = params.strokeWidth < 2 ? params.strokeWidth * 6 : params.strokeWidth * 2;
this.ctx.lineTo(-(width - 2), width);
this.ctx.lineTo(-(width - 2), -width);
this.ctx.closePath();
}

Expand All @@ -48,12 +51,11 @@ fabric.LineArrow = fabric.util.createClass(fabric.Line, {
});



fabric.LineArrow.fromObject = function(object, callback) {
fabric.LineArrow.fromObject = function (object, callback) {
callback && callback(new fabric.LineArrow([object.x1, object.y1, object.x2, object.y2], object));
};
fabric.LineArrow.async = true;
fabric.LineArrow.fromObject = function(object, callback) {
fabric.LineArrow.fromObject = function (object, callback) {
callback && callback(new fabric.LineArrow([object.x1, object.y1, object.x2, object.y2], object));
};
fabric.LineArrow.async = true;
Expand All @@ -63,78 +65,81 @@ export default (function () {
let color;
let lineWidth;
let fillArrow;
let strokeDashArray;
let properties;
function Arrow(canvas,draggable = false,params) {

if(!draggable){
function Arrow(canvas, draggable = false, params) {

if (!draggable) {
drag = false;
return Arrow;
}

if(color && color !== params.stroke){
if (color && color !== params.stroke) {
color = params.stroke;
new Arrow(canvas,draggable,params)
new Arrow(canvas, draggable, params)
return Arrow;
}

properties = params;
if(properties){
if (properties) {
fillArrow = params.fill;
color = params.stroke;
lineWidth = params.strokeWidth;
strokeDashArray = params.strokeDashArray;
}
this.canvas = canvas;
this.className = 'Arrow';
this.isDrawing = false;
this.bindEvents();
drag = draggable;

}

Arrow.prototype.bindEvents = function () {
let inst = this;
document.onkeydown=(e)=>{
if(e.which === 46 || e.keycode === 46){
document.onkeydown = (e) => {
if (e.which === 46 || e.keycode === 46) {
inst.canvas.getActiveObjects().forEach((obj) => {
inst.canvas.remove(obj)
});
}
inst.canvas.renderAll()
};
inst.selectable = true;
inst.canvas.off('mouse:down');
inst.canvas.on('mouse:down', function (o) {
inst.onMouseDown(o);
});
inst.canvas.on('mouse:move', function (o) {
inst.onMouseMove(o);
});
inst.canvas.on('mouse:up', function (o) {
inst.onMouseUp(o);
});
inst.canvas.on('object:moving', function () {
inst.disable();
});

inst.canvas.off('mouse:down');
inst.canvas.on('mouse:down', function (o) {
inst.onMouseDown(o);
});
inst.canvas.on('mouse:move', function (o) {
inst.onMouseMove(o);
});
inst.canvas.on('mouse:up', function (o) {
inst.onMouseUp(o);

});
inst.canvas.on('object:moving', function () {
inst.disable();
});
};
Arrow.prototype.onMouseUp = function () {
let inst = this;
if (!inst.isEnable()) {
return;
return;
}
if(drag){
if (drag) {
this.line.set({
dirty: true,
objectCaching: true
});
if(inst.canvas.getActiveObject()){
});
if (inst.canvas.getActiveObject()) {
inst.canvas.getActiveObject().hasControls = false;
inst.canvas.getActiveObject().hasBorders = false;
inst.canvas.getActiveObject().lockMovementX = true;
inst.canvas.getActiveObject().lockMovementY = true;
inst.canvas.getActiveObject().lockUniScaling = true;
}
}
inst.canvas.renderAll();
let saveHistory = new CanvasHistory(inst.canvas)
}
Expand All @@ -159,20 +164,20 @@ export default (function () {
Arrow.prototype.onMouseDown = function (o) {

let inst = this;
if(!drag){
if( inst.canvas.getActiveObject()){
if (!drag) {
if (inst.canvas.getActiveObject()) {
inst.canvas.getActiveObject().hasControls = true;
inst.canvas.getActiveObject().hasBorders = true;
inst.canvas.getActiveObject().lockMovementX = false;
inst.canvas.getActiveObject().lockMovementY = false;
inst.canvas.getActiveObject().lockUniScaling = false;
inst.canvas.getActiveObject().lockUniScaling = false;
inst.canvas.renderAll();
}
inst.disable();
return;
}
inst.enable();
if(inst.canvas.getActiveObject()){
if (inst.canvas.getActiveObject()) {
inst.canvas.getActiveObject().hasControls = false;
inst.canvas.getActiveObject().hasBorders = false;
inst.canvas.getActiveObject().lockMovementX = true;
Expand All @@ -184,6 +189,7 @@ export default (function () {
let points = [pointer.x, pointer.y, pointer.x, pointer.y];
this.line = new fabric.LineArrow(points, {
strokeWidth: lineWidth,
strokeDashArray: strokeDashArray,
fill: color,
stroke: color,
originX: 'center',
Expand All @@ -192,9 +198,8 @@ export default (function () {
hasControls: false,
objectCaching: false,
perPixelTargetFind: true,
heads: [1, 0]
heads: [1, 0],
});

inst.canvas.add(this.line).setActiveObject(this.line);

};
Expand Down
Loading

0 comments on commit d8d6ca9

Please sign in to comment.