flast.js
// clear the canvas and draw the tiles
clear the canvas and draw the tiles
clear the canvas and draw the tiles
redraw() {
    let p1 = this._transformedPoint(0, 0)
    let p2 = this._transformedPoint(this.canvasWidth, this.canvasHeight)
    let rect = {
      x: p1.x,
      y: p1.y,
      width: p2.x - p1.x,
      height: p2.y - p1.y,
    }
    this._ctx.clearRect(rect.x, rect.y, rect.width, rect.height)
    this._ctx.fillStyle = '#cccccc'
    this._ctx.fillRect(-1000000000, -1000000000, 2000000000, 2000000000)
    let mins = Math.log(this._minScale) / Math.LN2
    let maxs = Math.log(this._maxScale) / Math.LN2
    let s = Math.log(this._transform.a) / Math.LN2
    let zoomPercent = (s - mins) / (maxs - mins)
    let zoomLevel = Math.max(Math.ceil(zoomPercent * this.maxZoom), 1)
    let numTiles = Math.pow(2, zoomLevel)
    let tileWidth = (this._contentSize.width / numTiles) * this._pixelRatio()
    let tileHeight = (this._contentSize.height / numTiles) * this._pixelRatio()
    for (let j = 0; j < numTiles; j++) {
      for (let k = 0; k < numTiles; k++) {
        let tile = {
          x: j * tileWidth,
          y: k * tileHeight,
          width: tileWidth,
          height: tileHeight,
        }
        if (this._intersectRect(rect, tile)) {
          let image = this._tileImage(zoomLevel, j, k)
          if (image.complete && image.naturalHeight !== 0) {
            this._ctx.drawImage(image, tile.x, tile.y, tile.width, tile.height)
          }
          else {
            let zl = zoomLevel - 1
            while (zl > 0) {
              let parentJ = Math.floor((j / Math.pow(2, zoomLevel)) * Math.pow(2, zl))
              let parentK = Math.floor((k / Math.pow(2, zoomLevel)) * Math.pow(2, zl))
              let image = this._tileImage(zl, parentJ, parentK)
              if (image.complete && image.naturalHeight !== 0) {
                let childTilesPerParent = Math.pow(2, zoomLevel) / Math.pow(2, zl)
                let jRemainder = j - childTilesPerParent * parentJ
                let kRemainder = k - childTilesPerParent * parentK
                let sWidth = image.width / childTilesPerParent
                let sHeight = image.height / childTilesPerParent
                let sx = Math.floor(jRemainder * sWidth)
                let sy = Math.floor(kRemainder * sHeight)
                this._ctx.drawImage(image, sx, sy, sWidth, sHeight, tile.x, tile.y, tile.width, tile.height)
                break
              }
              zl -= 1
            }
          }
        }
      }
    }
    let currentAnnotation = this._drawingAnnotation || { shapes: [] }
    for (let annotation of this.annotations.concat(currentAnnotation)) {
      if (
        (this._selectedAnnotation && !this.callbacks.compareAnnotations(annotation, this._selectedAnnotation)) ||
        (this._drawingAnnotation && !this.callbacks.compareAnnotations(annotation, this._drawingAnnotation))
      ) {
        this._ctx.globalAlpha = 0.2
      } else {
        this._ctx.globalAlpha = 1.0
      }
      let shapes = annotation.shapes
      if (annotation === currentAnnotation) {
        shapes = shapes.concat(this._currentShape || [])
      }
      for (let shape of shapes) {
        let tool = this.tools.find(tool => {
          return tool.name === shape.kind
        })
        this._ctx.fillStyle = annotation.color || this._authorColor || '#FF0000'
        this._ctx.strokeStyle = annotation.color || this._authorColor || '#FF0000'
        this._ctx.lineWidth = _lineWidth
        tool.drawInContext(this._ctx, tool.scaleGeometry(shape.geometry, this._pixelRatio()))
      }
    }
    this._ctx.globalAlpha = 1.0
  }
redraw ( ) { let p1 = this . _transformedPoint ( 0 , 0 ) let p2 = this . _transformedPoint ( this . canvasWidth , this . canvasHeight ) let rect = { x : p1 . x , y : p1 . y , width : p2 . x - p1 . x , height : p2 . y - p1 . y , } this . _ctx . clearRect ( rect . x , rect . y , rect . width , rect . height ) this . _ctx . fillStyle = '#cccccc' this . _ctx . fillRect ( - 1000000000 , - 1000000000 , 2000000000 , 2000000000 ) let mins = Math . log ( this . _minScale ) / Math . LN2 let maxs = Math . log ( this . _maxScale ) / Math . LN2 let s = Math . log ( this . _transform . a ) / Math . LN2 let zoomPercent = ( s - mins ) / ( maxs - mins ) let zoomLevel = Math . max ( Math . ceil ( zoomPercent * this . maxZoom ) , 1 ) let numTiles = Math . pow ( 2 , zoomLevel ) let tileWidth = ( this . _contentSize . width / numTiles ) * this . _pixelRatio ( ) let tileHeight = ( this . _contentSize . height / numTiles ) * this . _pixelRatio ( ) for ( let j = 0 ; j < numTiles ; j ++ ) { for ( let k = 0 ; k < numTiles ; k ++ ) { let tile = { x : j * tileWidth , y : k * tileHeight , width : tileWidth , height : tileHeight , } if ( this . _intersectRect ( rect , tile ) ) { let image = this . _tileImage ( zoomLevel , j , k ) if ( image . complete && image . naturalHeight !== 0 ) { this . _ctx . drawImage ( image , tile . x , tile . y , tile . width , tile . height ) } else { let zl = zoomLevel - 1 while ( zl > 0 ) { let parentJ = Math . floor ( ( j / Math . pow ( 2 , zoomLevel ) ) * Math . pow ( 2 , zl ) ) let parentK = Math . floor ( ( k / Math . pow ( 2 , zoomLevel ) ) * Math . pow ( 2 , zl ) ) let image = this . _tileImage ( zl , parentJ , parentK ) if ( image . complete && image . naturalHeight !== 0 ) { let childTilesPerParent = Math . pow ( 2 , zoomLevel ) / Math . pow ( 2 , zl ) let jRemainder = j - childTilesPerParent * parentJ let kRemainder = k - childTilesPerParent * parentK let sWidth = image . width / childTilesPerParent let sHeight = image . height / childTilesPerParent let sx = Math . floor ( jRemainder * sWidth ) let sy = Math . floor ( kRemainder * sHeight ) this . _ctx . drawImage ( image , sx , sy , sWidth , sHeight , tile . x , tile . y , tile . width , tile . height ) break } zl -= 1 } } } } } let currentAnnotation = this . _drawingAnnotation || { shapes : [ ] } for ( let annotation of this . annotations . concat ( currentAnnotation ) ) { if ( ( this . _selectedAnnotation && ! this . callbacks . compareAnnotations ( annotation , this . _selectedAnnotation ) ) || ( this . _drawingAnnotation && ! this . callbacks . compareAnnotations ( annotation , this . _drawingAnnotation ) ) ) { this . _ctx . globalAlpha = 0.2 } else { this . _ctx . globalAlpha = 1.0 } let shapes = annotation . shapes if ( annotation === currentAnnotation ) { shapes = shapes . concat ( this . _currentShape || [ ] ) } for ( let shape of shapes ) { let tool = this . tools . find ( tool => { return tool . name === shape . kind } ) this . _ctx . fillStyle = annotation . color || this . _authorColor || '#FF0000' this . _ctx . strokeStyle = annotation . color || this . _authorColor || '#FF0000' this . _ctx . lineWidth = _lineWidth tool . drawInContext ( this . _ctx , tool . scaleGeometry ( shape . geometry , this . _pixelRatio ( ) ) ) } } this . _ctx . globalAlpha = 1.0 }
clear the canvas and draw the tiles
clear the canvas and draw the tiles
// Clear the entire canvas // this._ctx.imageSmoothingEnabled = false; // this._ctx.imageSmoothingQuality = 'low'; // if the tile at that zoom level is not loaded, show the lower // res version at the lower zoom level // this._ctx.imageSmoothingEnabled = false; // this._ctx.imageSmoothingQuality = 'low'; // draw in-progress annotation/shapes // draw all annotations // when drawing, fade out all other shapes except the current annotation // draw in-progress shapes // draw shapes // find the right tool for the job // set how shape should look by default // (can be overriden in drawInContext) // if we decide we want the line to stay the same width at all scales: // this._ctx.lineWidth = (1 / this._transform.a) * _lineWidth // tests bounding box // this._ctx.lineWidth = 1; // let g = tool.boundingRect(shape.geometry); // this._ctx.beginPath(); // this._ctx.strokeRect(g.x, g.y, g.width, g.height); // this._ctx.stroke(); // tests annotation bounding box // this._ctx.lineWidth = 1; // let g = this.boundingRectFor(annotation); // this._ctx.beginPath(); // this._ctx.strokeRect(g.x, g.y, g.width, g.height); // this._ctx.stroke();