PHP Classes

File: toastui/src/js/component/line.js

Recommend this page to a friend!
  Classes of Mark de Leon   PHP Document Scanner using SANE or eSCL AirPrint   toastui/src/js/component/line.js   Download  
File: toastui/src/js/component/line.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Document Scanner using SANE or eSCL AirPrint
Web interface to scan printed documents
Author: By
Last change:
Date: 4 years ago
Size: 4,254 bytes
 

Contents

Class file image Download
/** * @author NHN Ent. FE Development Team <dl_javascript@nhn.com> * @fileoverview Free drawing module, Set brush */ import fabric from 'fabric/dist/fabric.require'; import Component from '../interface/component'; import consts from '../consts'; const {eventNames} = consts; /** * Line * @class Line * @param {Graphics} graphics - Graphics instance * @extends {Component} * @ignore */ class Line extends Component { constructor(graphics) { super(consts.componentNames.LINE, graphics); /** * Brush width * @type {number} * @private */ this._width = 12; /** * fabric.Color instance for brush color * @type {fabric.Color} * @private */ this._oColor = new fabric.Color('rgba(0, 0, 0, 0.5)'); /** * Listeners * @type {object.<string, function>} * @private */ this._listeners = { mousedown: this._onFabricMouseDown.bind(this), mousemove: this._onFabricMouseMove.bind(this), mouseup: this._onFabricMouseUp.bind(this) }; } /** * Start drawing line mode * @param {{width: ?number, color: ?string}} [setting] - Brush width & color */ start(setting) { const canvas = this.getCanvas(); canvas.defaultCursor = 'crosshair'; canvas.selection = false; this.setBrush(setting); canvas.forEachObject(obj => { obj.set({ evented: false }); }); canvas.on({ 'mouse:down': this._listeners.mousedown }); } /** * Set brush * @param {{width: ?number, color: ?string}} [setting] - Brush width & color */ setBrush(setting) { const brush = this.getCanvas().freeDrawingBrush; setting = setting || {}; this._width = setting.width || this._width; if (setting.color) { this._oColor = new fabric.Color(setting.color); } brush.width = this._width; brush.color = this._oColor.toRgba(); } /** * End drawing line mode */ end() { const canvas = this.getCanvas(); canvas.defaultCursor = 'default'; canvas.selection = true; canvas.forEachObject(obj => { obj.set({ evented: true }); }); canvas.off('mouse:down', this._listeners.mousedown); } /** * Mousedown event handler in fabric canvas * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object * @private */ _onFabricMouseDown(fEvent) { const canvas = this.getCanvas(); const pointer = canvas.getPointer(fEvent.e); const points = [pointer.x, pointer.y, pointer.x, pointer.y]; this._line = new fabric.Line(points, { stroke: this._oColor.toRgba(), strokeWidth: this._width, evented: false }); this._line.set(consts.fObjectOptions.SELECTION_STYLE); canvas.add(this._line); canvas.on({ 'mouse:move': this._listeners.mousemove, 'mouse:up': this._listeners.mouseup }); } /** * Mousemove event handler in fabric canvas * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object * @private */ _onFabricMouseMove(fEvent) { const canvas = this.getCanvas(); const pointer = canvas.getPointer(fEvent.e); this._line.set({ x2: pointer.x, y2: pointer.y }); this._line.setCoords(); canvas.renderAll(); } /** * Mouseup event handler in fabric canvas * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object * @private */ _onFabricMouseUp() { const canvas = this.getCanvas(); const params = this.graphics.createObjectProperties(this._line); this.fire(eventNames.ADD_OBJECT, params); this._line = null; canvas.off({ 'mouse:move': this._listeners.mousemove, 'mouse:up': this._listeners.mouseup }); } } module.exports = Line;