Implementazione di un esempio raster spirale di Paper.js sul lato server

Sto tentando di disegnare un esempio raster a spirale (link) su un server (eseguendo Node.js). Tuttavia, sto affrontando un problema in cui il mio percorso non è visualizzato sul frame esportato e posso solo vedere l'immagine scaricata. Probabilmente uno stupido errore dalla mia parte, tuttavia, i giorni di guardare attraverso Google e la documentazione non mi hanno aiutato a risolvere un problema.Implementazione di un esempio raster spirale di Paper.js sul lato server

Quello che ho fatto:

Aggiungi paper. prefissi
cambiato +/- per corrispondenti add() e subtract()
provato presentando un percorso all'interno di un livello.

Ecco il mio codice:

var paper = require('paper'); 
var fs = require('fs'); 
var drawer = {}; 

var canvas = new paper.Canvas(1000, 1000); 
paper.setup(canvas); 

var layer = paper.project.activeLayer; 

drawer.drawSpiral = function(url, filename, fn) { 
    var url = 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'; 
    var raster = new paper.Raster(url); 

    raster.onLoad = function() { 
     raster.fitBounds(paper.view.bounds); 

     var position = paper.view.center; 
     var count = 0; 
     var max = Math.min(raster.bounds.width, raster.bounds.height) * 0.5; 

     var path = new paper.Path(); 
     path.fillColor = 'black'; 
     path.closed = true; 

     while ((paper.view.center - position).length < max) { 
      count++; 

      var vector = new paper.Point(count * 5, count/100); 
      var rot = vector.rotate(90); 
      var color = raster.getAverageColor(position.add(vector).divide(2)); 
      var value = color ? (1 - color.gray) * 3.7 : 0; 

      rot.length = Math.max(value, 0.2); 
      path.add(position.add(vector).subtract(rot)); 
      path.insert(0, position.add(vector).add(rot)); 

      position = position.add(vector); 
     } 

     path.smooth(); 
     layer.insertChild(0, path); 
     layer.fitBounds(paper.view.bounds); 
     drawer.exportPNG(filename, fn); 
    }; 
} 

drawer.exportPNG = function(filename, fn) { 
    out = fs.createWriteStream(__dirname + '/static/img/' + filename + '.png'); 
    stream = canvas.pngStream(); 

    stream.on('data', function(chunk) { 
     out.write(chunk); 
    }); 

    stream.on('end', function() { 
     fn(); 
    }); 
} 

module.exports = drawer;

Richiamato, ovviamente, in questo modo:

var drawer = require('./drawer.js'); 
drawer.drawSpiral('','abc', function(){});

fonte

2015-01-09 dmee3

Non ho dimestichezza con l'utilizzo di paper.js all'interno Node.js, ma mi piacerebbe provare a aggiornare la vista dopo aver disegnato - provare ad aggiungere * paper.view.update () * alla fine del codice di disegno –

Il collegamento all'esempio di spirale raster dovrebbe avere un avviso di integrità! ;) –

@Nicholas, grazie per il suggerimento, lo proverò ogni volta che otterrò un secondo. Tuttavia, l'esempio Nodejs che è stato incluso nel repository ha anche disegnato alcuni percorsi e li ha visualizzati correttamente senza quella linea. Stranamente:/ – dmee3

Qui funziona per me. Devi usare un'immagine dal tuo sistema. Ownload un'immagine e poi usarlo

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Spiral Raster</title> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script> 
    <script type="text/paperscript" canvas="canvas"> 
     // Please note: dragging and dropping images only works for 
     // certain browsers when serving this script online: 
     var path, position, max; 
     var count = 0; 
     var grow = true; 
     var raster = new Raster('mona'); 
     raster.remove(); 

     var text = new PointText(view.bounds.bottomRight - [30, 30]); 
     text.justification = 'right'; 
     text.fontSize = 10; 
     text.content = window.FileReader 
       ? 'drag & drop an image from your desktop to rasterize it' 
       : 'to drag & drop images, please use Webkit, Firefox, Chrome or IE 10'; 

     resetSpiral(); 

     function onFrame(event) { 
      if (grow) { 
       if (raster && (view.center - position).length < max) { 
        for (var i = 0, l = count/36 + 1; i < l; i++) { 
         growSpiral(); 
        } 
        path.smooth(); 
       } else { 
        grow = false; 
       } 
      } 
     } 

     function growSpiral() { 
       count++; 
       var vector = new Point({ 
        angle: count * 5, 
        length: count/100 
       }); 
       var rot = vector.rotate(90); 
       var color = raster.getAverageColor(position + vector/2); 
       var value = color ? (color.gray) * 3.7 : 0; 
       rot.length = Math.max(value, 0.2); 
       path.add(position + vector - rot); 
       path.insert(0, position + vector + rot); 
       position += vector; 
     } 

     function resetSpiral() { 
      grow = true; 

      // Transform the raster, so it fills the view: 
      raster.fitBounds(view.bounds); 

      if (path) 
       path.remove(); 

      position = view.center; 
      count = 0; 
      path = new Path(); 
      path.fillColor = 'black'; 
      path.closed = true; 

      position = view.center; 
      max = Math.min(raster.bounds.width, raster.bounds.height) * 0.5; 
     } 

     function onResize() { 
      text.remove(); 
      if (count > 0) 
       resetSpiral(); 
     } 

     function onKeyDown(event) { 
      if (event.key == 'space') { 
       path.selected = !path.selected; 
      } 
     } 

     function onDocumentDrag(event) { 
      event.preventDefault(); 
     } 

     function onDocumentDrop(event) { 
      event.preventDefault(); 

      var file = event.dataTransfer.files[0]; 
      var reader = new FileReader(); 

      reader.onload = function (event) { 
       var image = document.createElement('img'); 
       image.onload = function() { 
        raster = new Raster(image); 
        raster.remove(); 
        resetSpiral(); 
       }; 
       image.src = event.target.result; 
      }; 
      reader.readAsDataURL(file); 
     } 

     DomEvent.add(document, { 
      drop: onDocumentDrop, 
      dragover: onDocumentDrag, 
      dragleave: onDocumentDrag 
     }); 
    </script> 
    <style> 
    body { 
    margin: 0; 
    overflow: hidden; 
    } 
    </style> 
</head> 
<body> 
    <canvas id="canvas" resize style="background-color:white"></canvas> 
    <img width="512" height="512" id="mona" style="display: none;" src="it_follows.jpg"> 
</body> 
</html>

fonte

2015-06-24 19:14:51

Ehi, Ritesh! Grazie per la tua risposta. Ho già implementato l'esempio del lato client. Domanda posta riguardo al disegno in Node.js (sul lato server) per restituire l'immagine renderizzata all'utente (e quindi scaricare il lavoro sul mio server dove potrebbe essere memorizzato nella cache). – dmee3

Implementazione di un esempio raster spirale di Paper.js sul lato server

risposta

Problemi correlati