paper.js的描边不一致 [英] paper.js Stroke Drawing Inconsistently

问题描述

我不仅要解决此问题，而且还要重现它.我有一个正在进行的Web应用程序，但是paper.js存在的问题是有时笔画会画得太大.这是它的外观:

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:

但是它是这样绘制的:

任何人都知道这是怎么发生的吗?它只会间歇显示.谢谢！

Anyone have any clues how this could be happening? It only shows up intermittently. Thanks!

我发现问题出在我动态调整<canvas>元素的大小以适合jQuery加载时的屏幕.现在，我添加了一个将高度和宽度传递给我的Paperscript的事件，但是它仍然无法正常工作.我将尽快发布解决方案.

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.

推荐答案

问题源于PaperScript接管之前未调整画布大小，因此创建了一个很小的画布，然后将其放大以适合该元素.

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.

解决方案是按照PaperScript的加载时间进行工作.我通过修改加载代码来解决此问题(为简洁起见，将其缩写和"para-coded"化了):

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
       });
     });
  });
});

我在 https://stackoverflow.com/a/14114337/1288913 上找到了它.我希望它可以帮助某个人！

I found this at https://stackoverflow.com/a/14114337/1288913. I hope it helps someone out there!

这篇关于paper.js的描边不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！