问题
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 now added an event that passes the height and width to my Paperscript, but it is not working still. Will post solution as soon as I have it.
回答1:
The issue stems from the canvas not being sized before PaperScript takes over, thus creating a tiny canvas that is then scaled up to fit the element.
The solution is to work on the timing of the PaperScript load. I fixed it by modifying my loading code like so (shortened and "para-coded" for brevity):
$(document).ready(function() { // wait for elements to propagate
$.get(...) // load html for text from external files
.then($('images').waitForImages() // wait for images to load
.then(function() {
resizeCanvas(); // make the canvas the correct size
$.getScript(paper_url, function() { // load paper.js dynamically
console.log("Paperjs is now loaded.");
paper.PaperScript.load(); // get paper.js to scan your application for paperscript
});
// do everything else post load
});
});
});
});
I found this at https://stackoverflow.com/a/14114337/1288913. I hope it helps someone out there!
来源:https://stackoverflow.com/questions/40219320/paper-js-stroke-drawing-inconsistently