javascript - Fabric.js - 需要为多边形使用填充图案和填充颜色

Question

我通过 fabric.js 设置了一个形状，我正在尝试使用 fill 同时实现两个目标:

1) 一个rgba填充颜色rgba(255,0,0,0.5)

和

2) 一个 fabric.Pattern 带有一个透明的 SVG 图像。

我可以使用 SVG 图像分别 fill 颜色和 fill >，但我不知道如何将它们放在一起

我使用的代码:

var canvas = this.__canvas = new fabric.Canvas('c');

//To set the pattern with an SVG image
function loadPattern(url) {
    fabric.util.loadImage(url, function(img) {
      shape.set('fill', new fabric.Pattern({
        source: img,
        repeat: 'repeat'
      }));
      canvas.renderAll();
   });
}

//To set just a color
function setColor(color) {
   shape.set('fill', color);
   canvas.renderAll();
}

//To set the backgroundColor
function setbackgroundColor(color) {
   shape.set('backgroundColor', color);
   canvas.renderAll();
}

var shape = new fabric.Polyline([
    {x: 78, y: 138},
    {x: 146, y: 96},
    {x: 170, y: 117},
    {x: 275, y: 127},
    {x: 275, y: 216},
    {x: 78, y: 138}
    ], {
    fill: 'rgba(255,0,0,0.5)',
    stroke: 'red',
    left: 100,
    top: 100
});

canvas.add(shape);

这是仅使用颜色的 fill 时的样子:

这是仅对模式使用 fill 时的样子:

我尝试使用 fill 加上 ```shape.backgroundColor = 'rgba(255,0,0,0.5)';

但事情是这样的:

我们的目标是让颜色和图案都包含在形状中，如下所示:

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

//To set the pattern with an SVG image
function loadPattern(url) {
    fabric.util.loadImage(url, function(img) {
      shape.set('fill', new fabric.Pattern({
        source: img,
        repeat: 'repeat'
      }));
      canvas.renderAll();
   });
}



//To set just a color
function setColor(color) {
   shape.set('fill', color);
   canvas.renderAll();
}

//

function setbackgroundColor(color) {
   shape.set('backgroundColor', color);
   canvas.renderAll();
}

var shape = new fabric.Polyline([
    {x: 78, y: 138},
    {x: 146, y: 96},
    {x: 170, y: 117},
    {x: 275, y: 127},
    {x: 275, y: 216},
    {x: 78, y: 138}
    ], {
    fill: 'rgba(255,0,0,0.5)',
    stroke: 'red',
    left: 100,
    top: 100
});

canvas.add(shape);

canvas {
    border: 1px solid #999;
}
button {
    margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<button onclick="loadPattern('https://www.heropatterns.com/svg/anchors-away.svg');">Set pattern</button>
<button onclick="setColor('rgba(255,0,0,0.5)');">Set color</button>
<button onclick="setbackgroundColor('rgba(255,0,0,0.5)');">Set backgroundColor</button>
<button onclick="setbackgroundColor('transparent');">Set backgroundColor to transparent</button>
<canvas id="c" width="400" height="400"></canvas>

这是我的 jsFiddle: http://jsfiddle.net/shehan11/1vgps2dw/5/

感谢您的帮助!

Answer 1

我最终的解决方案是将颜色信息传递给 PHP 文件，该文件使用颜色信息呈现 SVG。

JS:

var rgb = {
 r: 255,
 b: 0,
 g: 0
};

var url = '/pattern.php?pattern=' + pattern + '&r=' + rgb.r + '&g=' + rgb.g + '&b=' + rgb.b;

    fabric.util.loadImage(url, function (img) {
      shape.set('fill', new fabric.Pattern({
        source: img,
        repeat: 'repeat'
      }));
      shape.pattern = pattern;
      canvas.renderAll();
    });

PHP 文件:

echo '<svg style="background-color:'."rgba($r,$g,$b,0.5)".';" xmlns="http://www.w3.org/2000/svg" width="70" height="46" viewBox="0 0 70 46"><g fill-rule="evenodd"><g fill="#000"><polygon points="68 44 62 44 62 46 56 46 56 44 5```

In this way, the JS uses PHP to create an SVG image on the fly with color information