paperjs | 易学教程

Paper.js zigzag path

阅读更多关于 Paper.js zigzag path

问题 Im using paper.js and attempting to created function to create zizag paths. I have divided the path up in to segments, using getPointAt and now trying ad the zigzag by adding the normals sketch and code. Thanks in advance code: var zag= new Path() var start= new Point(view.center) var end= start.add(300,200) zag.add(start, end) zag.strokeColor="black" var count= 20, length= zag.length; for(var i= 0; i<count; i++){ var offset= i / count * length var normal= zag.getNormalAt(offset) * 30 zag.add

How to pan using paperjs

阅读更多关于 How to pan using paperjs

问题 I have been trying to figure out how to pan/zoom using onMouseDrag, and onMouseDown in paperjs. The only reference I have seen has been in coffescript, and does not use the paperjs tools. 回答1: you can simplify Sam P's method some more: var toolPan = new paper.Tool(); toolPan.onMouseDrag = function (event) { var offset = event.downPoint - event.point; paper.view.center = paper.view.center + offset; }; the event object already has a variable with the start point called downPoint. i have put

Import svg with gradient stroke to paper.js project

阅读更多关于 Import svg with gradient stroke to paper.js project

问题 Paper.js don't show path with gradient imported from SVG. Here is an example https://codepen.io/Husband/pen/LoomQo As you can see a path with stroke color red is displayed, and path with a gradient is hidden. <canvas id="canvas" resize></canvas> <svg xmlns="http://www.w3.org/2000/svg" width="1440" height="593" viewBox="0 0 1440 593" id="svg" style="display: none"> <defs> <linearGradient id="a" x1="3.463%" y1="53.239%" y2="53.239%"> <stop offset="0%" stop-color="#2CC2FE" stop-opacity="0"/>

Paperjs causing class syntax error when not using Paperjs code

阅读更多关于 Paperjs causing class syntax error when not using Paperjs code

问题 Using Paperjs: <script type="text/javascript" src="paper.js"></script> <script type="text/paperscript" canvas="myCanvas" src="myapp.js"></script> Trying to create a class in myapp.js: class Petal { constructor(index, x, y, diameter, round) { this.index = index; this.x = x; this.y = y; this.diameter = diameter; this.round = round; This creates a "syntax error unexpected token" in paper.js(not my code, thats the paperjs framework) at [paper.js:15421:12]. It refers to this (line 4 being 14521):

How to have form below canvas

阅读更多关于 How to have form below canvas

问题 I am trying to put a form below the red canvas. https://imgur.com/a/5dwPgeP shows what happens currently. I have tried different Divs and placing them in different code sections but nothing seems to be working. Please help me thank you. Code: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="WEBSITE.css">  <script type="text/javascript" src="node_modules/paper/dist/docs/assets/js/paper.js"></script> </head> <body> <div> <script src=

Dynamically loading a script changes its behaviour

阅读更多关于 Dynamically loading a script changes its behaviour

问题 I wanted paperjs to load after a button is pressed to turn on animations but it seems the paperscript doesn't work if paper is loaded after page load. If you comment out the setTimeout and uncomment the direct $.getScript - paperjs will fire the alert('hi') . I don't get it. <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function () { var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js'; $("#jq").text("jQuery

Resize rectangle in Paper.js

阅读更多关于 Resize rectangle in Paper.js

问题 I have a very ordinary rectangle created in Paper.js and I'd like to resize it, but I can't find any obvious ways to do it. var rect = new Rectangle([0, 0],[width,height]); rect.center = mousePoint; var path = new Path.Rectangle(rect, 4); path.fillColor = fillColor; path.meta = fillColor; There's a scale transformation method, but it's not really for mouse interaction and my goal is to create a handle that can resize a component. 回答1: You can calculate the scaling by dividing the intended

Event handlers in Paper.js

阅读更多关于 Event handlers in Paper.js

问题 I am new to Paper.js, and I was wondered by the event system, while reading tutorial. Thats how event hanling described in tutorial: var path; function onMouseDown(event) { // Create a path: path = new Path(); path.strokeColor = 'black'; // Add the mouse down position: path.add(event.point); } function onMouseUp(event) { // Add the mouse up position: path.add(event.point); } So, its just functions in global namespace... Eventually I have a few questions about it, and I didnt found anything on

paper.js Stroke Drawing Inconsistently

阅读更多关于 paper.js Stroke Drawing Inconsistently

问题 I am having trouble not only fixing this issue but also reproducing it. I have a web app with a lot going on but the problem I'm having with paper.js is that sometimes the stroke will draw way too large. Here is how it should look: But it draws like this: Anyone have any clues how this could be happening? It only shows up intermittently. Thanks! EDIT: I have figured out that the problem originates from that I dynamically size my <canvas> element to fit the screen on load with jQuery. I have

paperjs pointtext onhover select and resize

阅读更多关于 paperjs pointtext onhover select and resize

问题 I am trying to add pointtext on canvas using paperjs. i am able to create pointtext on canvas but need to handle drag and resize of text. scope.drawText = function () { var pointTextLocation = new p.Point(100,100); var myText = new p.PointText(pointTextLocation); myText.fillColor = 'red'; myText.fontSize= 25; myText.content = 'Sample Text'; }; is it possible to do like below screen using paperjs. I didn't find anywhere on google. Please suggest how to do this? 回答1: It is possible (using Item