How to use fabric - 10 common examples

server.listen(settings.port, function() {
    moment.locale(settings.language)
    app.engine('handlebars', exphbs({defaultLayout: 'main'}))
    app.set('view engine', 'handlebars')
    app.dayOftheWeek = parseInt(moment().format('e'), 10)
    app.fabric = require('fabric').fabric
    GLOBAL.fabric = app.fabric

    common.init(app)

    app.db = new loki('db.json', {
        autosave: true,
        autosaveInterval: 3000,
        autoload: true,
        autoloadCallback: function() {
            // if database did not exist it will be empty so I will intitialize here
            var collection = app.db.getCollection('paths')
            if (!collection) {
                collection = app.db.addCollection('paths', {indices: ['uuid']})
                collection.ensureUniqueIndex('uuid')
            }

// TODO 工具栏激活状态
if (process.env.NODE_ENV !== 'production') {
    require('./index.html')
}
const fabric = require('fabric').fabric
const { SaveImage } = require('./saveImage')
const { Config } = require('./config.js')
let canvas

// const socket = io.connect(`http://${Config.ws.host}:${Config.ws.port}`)

// // 监听绘画新状态
// socket.on('drawListen', (msg) => {
// 	// console.log('收到监听， drawListen')
// 	// console.log(msg)
// 	canvas.loadFromJSON(msg)
// })

// push已修改的状态
let HandleCanvasUpdate = (canvas) => {
    // // TODO 发送到服务端的话需要做序列号, 需要优化算法（不然这样服务器吃不消啊）

function drawing() {
            let canvasObject = null
            // console.log(drawType)
            // console.log(drawWidth)
            if (drawType == 'handle') {
                return
            }
            // 清理历史滑动痕迹
            if (drawingObject) {
                canvas.remove(drawingObject)
            }
            switch (drawType) {
                case "line": {
                    canvasObject = new fabric.Line([mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y], {
                        stroke: color,
                        strokeWidth: drawWidth
                    })
                    break
                }
                case "rectangle": {
                    let left = mouseFrom.x,
                        top = mouseFrom.y,
                        width = mouseTo.x - mouseFrom.x,
                        height = mouseTo.y - mouseFrom.y

                    canvasObject = new fabric.Rect({
                        left: width > 0 ? left : left + width,
                        top: height > 0 ? top : top + height,
                        width: Math.abs(width),
                        height: Math.abs(height),

`L ${ +width/2 + 10 } ${ -height/2 - 10 } ` +
    `L ${ -width/2 - 10 } ${ -height/2 - 10 } z ` +
    // Lines are offset here to make them sharp
    `M ${ -viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } ` +
    `L ${ +viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } ` +
    `L ${ +viewPort[0]/2 - 0.5 } ${ +viewPort[1]/2 - 0.5 } ` +
    `L ${ -viewPort[0]/2 - 0.5 } ${ +viewPort[1]/2 - 0.5 } ` +
    `L ${ -viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } z`
  )
  console.log('width/height', width, height)

  vp.setOptions({ fill: 'rgba(255, 255, 255, 0.6)' })
  overlay.add(vp)

  // Draw viewPort border ------------------------------------------------------
  overlay.add(new fabric.Rect({
    width: viewPort[0] + 1,
    height: viewPort[1] + 1,
    left: -viewPort[0]/2 - 1,
    top: -viewPort[1]/2 - 1,
    fill: 'transparent',
    stroke: 'rgba(0, 0, 0, 0.125)',
  }))

  return overlay
}

let curZoom = this.zoomFactor;
      let cursor, delta;
      if (zoomIn) {
        cursor = 'zoom-in';
        delta = 1.1;
        //this.scalePoints(.95);
      } else {
        cursor = 'zoom-out';
        delta = .95
        //this.scalePoints(1.1);
      }
      this.zoomFactor *= delta;
      console.log(cursor);
      // canvas.defaultCursor = cursor;
      // canvas.hoverCursor = cursor;
      canvas.zoomToPoint(new fabric.Point(
        e.e.offsetX, e.e.offsetY), this.zoomFactor);
      //this.resetCursors();
// let obj = e.target;
      // if (obj !== undefined 
      //     && obj !== null
      //     && this.polygonClicks.length > 0
      //     && obj === this.polygonClicks[0]) {
      //   obj.set({
      //     stroke: 'green',
      //     fill: 'green',
      //   });
      //   canvas.renderAll();
      // }
    },

export default (width, height, viewPort) => {
  const overlay = new fabric.StaticCanvas()
  overlay.setDimensions({
    width: width + 20, height: height + 20,
  })

  // Transform coordinate system
  overlay.setViewportTransform([
    1, 0, 0, 1,
    width/2 + 10, height/2 + 10
  ])

  // Draw viewport margin ------------------------------------------------------
  const vp = new fabric.Path(
    `M ${ -width/2 - 10 } ${ -height/2 - 10 } ` +
    `L ${ -width/2 - 10 } ${ +height/2 + 10 } ` +
    `L ${ +width/2 + 10 } ${ +height/2 + 10 } ` +
    `L ${ +width/2 + 10 } ${ -height/2 - 10 } ` +
    `L ${ -width/2 - 10 } ${ -height/2 - 10 } z ` +
    // Lines are offset here to make them sharp
    `M ${ -viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } ` +
    `L ${ +viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } ` +
    `L ${ +viewPort[0]/2 - 0.5 } ${ +viewPort[1]/2 - 0.5 } ` +
    `L ${ -viewPort[0]/2 - 0.5 } ${ +viewPort[1]/2 - 0.5 } ` +
    `L ${ -viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } z`
  )
  console.log('width/height', width, height)

  vp.setOptions({ fill: 'rgba(255, 255, 255, 0.6)' })
  overlay.add(vp)

export default (gridSize, offsetX, offsetY) => {
  // Correct for high-DPI devices
  const size = gridSize / window.devicePixelRatio

  // FIXME: Non-integer values break things
  console.log('Background grid size', size)

  // Create a single tile
  const backgroundTile = new fabric.StaticCanvas()
  backgroundTile.setDimensions({
    width: size, height: size,
  })

  // The grid needs to be filled in all four corners,
  // for one pixel each
  Array(4).fill().forEach((_, i) => {
    const [x, y] = [i % 2 * size, Math.floor(i / 2) * size]
    backgroundTile.add(new fabric.Rect({
      width: 1, height: 1,
      // FIXME: This is a hack, and it breaks down
      // when adding window scaling
      left: x - 1 + (offsetX / window.devicePixelRatio),
      top: y - 1 + (offsetY / window.devicePixelRatio),
      fill: 'rgba(0, 0, 0, 0.125)',
    }))

}).exec().then((chunk) => {
    // if nothing exists a cell with null data returns.
    if (chunk != null) {
      const tempCanvas = fabric.createCanvasForNode(CANVAS_SIZE, CANVAS_SIZE);
      tempCanvas.loadFromJSON(chunk.data, (done) => {
        const dataUrl = tempCanvas.toDataURL({ width: CANVAS_SIZE, height: CANVAS_SIZE });
        const modPng = dataUrl.substring(22, dataUrl.length);
        //console.log(modPng);
        sharp(new Buffer(modPng, "base64"))
          .resize(size, size)
          .toBuffer()
          .then(result => {
            debug(`done resize png ${x},${y}`);
            //console.log(`png update done ${x},${y}`)
            paintPngController.paintpng_save(x, y, size, result.toString("base64")).then(() => {
              //debug(result);
              debug(`done update png ${x},${y}`)
            });
            //pngs[`${x},${y}`] = result.toString("base64");
          }).catch(err => { debug(err) });

}).exec().then((chunk) => {
          // if nothing exists a cell with null data returns.
          if (chunk != null) {
            chunks[`${x},${y}`] = fabric.createCanvasForNode(CANVAS_SIZE, CANVAS_SIZE);
            chunks[`${x},${y}`].loadFromJSON(chunk.data, (done) => {
              resolve(chunks[`${x},${y}`]);
            });
          } else {
            resolve("chunk is null");
            //no chunk data from database
            //console.log("chunk is null");
          }
        }, (err) => {
          debug(err);

fabric.Image.fromObject = function(_object, callback) {
  var object = fabric.util.object.clone(_object)
  fabric.util.loadImage(object.src, function(img, error) {
    // Substitute empty image in case of error
    const image = new fabric.Image(
      error ? new Image() : img,
      object
    )
    image.crossOrigin = "anonymous"

    // Pretend that we were successful in any case
    callback(image)
  })
}