我有一个形状设置通过 Fabric.js 而我正试图使用 fill
来同时实现2个目标。
1) 一个rgba填充色rgba(255,0,0,0.5)
和
2) A fabric.Pattern
的SVG图像,它具有透明度。
我可以用 fill
颜色和 fill
fabric.Pattern
与SVG图像 分别但我不知道如何做他们一起
我正在使用的代码。
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
加上```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.netshehan111vgps2dw5
谢谢你的帮助!我有一个通过fabric.js设置的形状,我试图使用填充来同时实现2个目标。
我的解决方案是将颜色信息传递给一个PHP文件,该文件渲染SVG的颜色信息。
JS.Pattern.Pattern.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