[英]Fabric.js - Need to use fill pattern with fill color for a polygon
I have a shape set up through fabric.js and I'm trying to use fill
to achieve 2 goals simultaneously:我通过fabric.js设置了一个形状,我正在尝试使用
fill
同时实现 2 个目标:
1) An rgba fill color rgba(255,0,0,0.5) 1)一个rgba填充颜色rgba(255,0,0,0.5)
AND和
2) A fabric.Pattern
with an SVG image which has transparency. 2) 具有透明度的
fabric.Pattern
图像的 fabric.Pattern。
I'm able to do the fill
color and the fill
fabric.Pattern
with an SVG image separately , but I can't figure out how do do them together我可以分别使用
fabric.Pattern
图像fill
颜色和fill
面料。图案,但我不知道如何一起做
The code I'm using:我正在使用的代码:
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);
This is what it looks like when using fill
with just the color:这是仅使用颜色
fill
时的样子:
This is what it looks like when using fill
with just the pattern:这是仅使用图案
fill
时的样子:
I have tried using fill
with the pattern plus ```shape.backgroundColor = 'rgba(255,0,0,0.5)';我尝试使用带有图案的
fill
加上```shape.backgroundColor = 'rgba(255,0,0,0.5)';
But this is what happened:但这就是发生的事情:
The goal would be to have both the color and the pattern contained within the shape like this:目标是让颜色和图案都包含在形状中,如下所示:
// 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>
Here is my jsFiddle: http://jsfiddle.net/shehan11/1vgps2dw/5/这是我的 jsFiddle: http://jsfiddle.net/shehan11/1vgps2dw/5/
Thanks for your help!谢谢你的帮助!
My solution for this ended up being to pass the color information to a PHP file which renders the SVG with the color info.我对此的解决方案最终是将颜色信息传递给 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 FILE: 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.