Thực hiện ví dụ về raster xoắn giấy Paper.js ở phía máy chủ

Tôi đang cố vẽ một ví dụ raster xoắn ốc (link) trên máy chủ (chạy Node.js). Tuy nhiên, tôi đang đối mặt với một vấn đề mà đường dẫn của tôi không được hiển thị trên khung đã xuất và tôi chỉ có thể xem hình ảnh đã tải xuống. Có lẽ là một sai lầm ngớ ngẩn ở bên cạnh tôi, tuy nhiên, những ngày tìm kiếm thông qua Google và tài liệu không giúp tôi giải quyết vấn đề.Thực hiện ví dụ về raster xoắn giấy Paper.js ở phía máy chủ

Những gì tôi đã làm:

Thêm paper. tiền tố
Thay đổi +/- để tương ứng add() và subtract()
Cố gắng trình bày một con đường trong một lớp.

Đây là mã của tôi:

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;

Viện dẫn, rõ ràng, như thế này:

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

Nguồn

2015-01-09 dmee3

Tôi không quen thuộc với việc sử dụng paper.js bên Node.js, nhưng tôi muốn cố gắng cập nhật View sau khi vẽ - thử thêm * paper.view.update () * ở cuối mã vẽ của bạn –

Liên kết đến ví dụ raster xoắn ốc phải có cảnh báo về sức khỏe! ;) –

@Nicholas, cảm ơn vì đề nghị này, tôi sẽ thử nó bất cứ khi nào tôi nhận được một giây. Tuy nhiên, ví dụ Nodejs đã được bao gồm trong repo cũng đã vẽ một số đường dẫn và hiển thị chúng thành công mà không có dòng đó. Weird:/ – dmee3

Ở đây nó làm việc cho tôi. Bạn cần sử dụng một hình ảnh từ hệ thống của bạn. Ownload một hình ảnh và sau đó sử dụng nó

<!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>

Nguồn

2015-06-24 19:14:51

Xin chào, Ritesh! Cảm ơn câu trả lời của bạn. Tôi đã thực hiện ví dụ phía khách hàng đã được mặc dù. Câu hỏi được hỏi về việc vẽ trong Node.js (ở phía máy chủ) để trả về hình ảnh được hiển thị cho người dùng (và do đó tải công việc xuống máy chủ của tôi nơi nó có thể được lưu trữ). – dmee3

Thực hiện ví dụ về raster xoắn giấy Paper.js ở phía máy chủ

Trả lời

Các vấn đề liên quan