使用 paper.js 的角度渐变 SVG答案

【问题标题】：Angle gradient SVG using paper.js使用 paper.js 的角度渐变 SVG
【发布时间】：2021-11-26 04:43:04
【问题描述】：

我正在使用 paper.js 创建渐变形式。从下面的例子中我找到了做线性渐变和径向渐变的方法，但是我还没有找到任何例子或方向用 paper.js 和 SVG 做角度渐变，这甚至可能吗？

这是我在官方paper.js site 中找到的 2 个示例，用于创建 Lnear 和 Radial Gradient 以及实现这种形式的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gradients</title>
    <link rel="stylesheet" href="../css/style.css">
    <!-- IE 9: display inline SVG -->
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        var stops = [new Color(1, 1, 0, 0), 'red', 'black'];

        var radius = view.bounds.width * 0.4,
            from = new Point(view.center.x),
            to = from + [radius, 0];

        var circle = new Path.Circle({
            center: from,
            radius: radius,
            fillColor: {
                stops: stops,
                radial: true,
                origin: from,
                destination: to
            },
            strokeColor: 'black'
        });

        var from = view.bounds.leftCenter,
            to = view.bounds.bottomRight;

        var rect = new Path.Rectangle({
            from: from,
            to: to,
            fillColor: {
                stops: stops,
                radial: false,
                origin: from,
                destination: to
            },
            strokeColor: 'black'
        });

        //rect.rotate(45).scale(0.7);

        document.body.appendChild(project.exportSVG());
    </script>
</head>
<body>
    <canvas id="canvas" width="300" height="600"></canvas>
</body>
</html>

【问题讨论】：

标签： javascript svg gradient paperjs

【解决方案1】：

很遗憾，Paper.js 不支持此功能。
并且它很快支持它的可能性很小，除非 Canvas API 本身（Paper.js 用来绘制）支持它。也许您可以找到解决方法here。

【讨论】：