javascript - 如何将 paper.js 应用到一个简单的 html 页面？-6ren

javascript - 如何将 paper.js 应用到一个简单的 html 页面？

转载作者：行者123 更新时间：2023-11-30 15:35:23

我尝试了几种不同的 paper.js 方法，但我什至无法在我的计算机上成功运行一个简单的示例。我想知道我的配置或理解有问题吗？

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="myCanvas" resize></canvas>
  <img id="mona" src="bastion.png">
  <!-- Load the Paper.js library -->
  <script type="text/javascript" src="paper-full.js"></script>
  <!-- Define inlined PaperScript associate it with myCanvas -->
  <script type="text/paperscript" canvas="myCanvas">
      // Create a raster item using the image tag with id='mona'
      var raster = new Raster('mona');

      // Move the raster to the center of the view
      raster.position = view.center;

      // Create a circle shaped path at {x: 50, y: 50}
      // with a radius of 30:
      var path = new Path.Circle({
        center: [50, 50],
        radius: 30,
        strokeColor: 'white'
      });

      function onMouseMove(event) {
        // Set the fill color of the path to the average color
        // of the raster at the position of the mouse:
        path.fillColor = raster.getAverageColor(event.point);
      }
  </script>
</body>
</html>

这个例子来自here和 here .我想通过放大镜效果构建一个简单的滴眼液颜色选择器。

但是在我按照文档进行操作之后，我得到的是这样的

而且我放大镜中的颜色(白色圆圈)不会改变。我不熟悉这个库，但我花了 5 个多小时才弄明白。

感谢任何帮助。

最佳答案

在我的浏览器 (Chrome 55) 中，出现以下错误:

paper-full.js:5207 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at Raster.getAverageColor (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:5207:20)
at Tool.onMouseMove [as _onMouseMove] (<anonymous>:20:33)
at Tool.emit (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:652:20)
at emit (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12848:19)
at Tool._handleMouseEvent (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12861:5)
at CanvasView._handleMouseEvent (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12314:19)
at handleMouseMove (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12065:8)
at HTMLDocument.docEvents.(anonymous function) (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12135:4)

这是一个跨域脚本错误，由从本地文件系统加载图像引起。 The paper.js documentation实际上警告这个问题:

Please note: Images need to already be loaded when they are added to a Paper.js project. Working with local images or images hosted on other websites may throw security exceptions on certain browsers.

我将相同的 HTML 文件加载到本地 MAMP服务器(可能有点矫枉过正，但这是我立即可用的)和脚本示例完美运行。

顺便说一句，您实际上可以通过将图像文件直接加载到光栅对象中来完全消除重复图像: