Question

我正在使用Fabric来创建像这样的径向渐变

它可以通过css轻松创建。喜欢这个

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #1e5799 0%,rgba(255, 255, 255, 0) 100%);
}
</style>
</head>
<body>

<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

但似乎fabricJS不支持它。它只支持从一侧到另一侧的渐变（？）

之前是否有人使用此功能。请给我支持。

谢谢

Answer 1

是

一些例子：http://jsfiddle.net/fabricjs/58y8b/

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

// Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});

// Initialze the example
var rect1 = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
    fill: '#ffda4f'
});
var rect2 = new fabric.Rect({
    left: 250,
    top: 100,
    width: 100,
    height: 100,
    fill: 'rgb(111,154,211)'
});
var rect3 = new fabric.Rect({
    left: 400,
    top: 100,
    width: 100,
    height: 100,
    fill: 'rgb(166,111,213)'
});
var rect4 = new fabric.Rect({
    left: 100,
    top: 400,
    width: 100,
    height: 100,
    fill: '#ffda4f'
});
var rect5 = new fabric.Rect({
    left: 250,
    top: 400,
    width: 100,
    height: 100,
    fill: 'rgb(111,154,211)'
});
var rect6 = new fabric.Rect({
    left: 400,
    top: 400,
    width: 100,
    height: 100,
    fill: 'rgb(166,111,213)'
});
canvas.add(rect1, rect2, rect3, rect4, rect5, rect6);

/**
 * setGradient linear gradients example
 */

// horizontal linear gradient
rect1.setGradient('fill', {
    type: 'linear',
    x1: -rect1.width / 2,
    y1: 0,
    x2: rect1.width / 2,
    y2: 0,
    colorStops: {
        0: '#ffe47b',
        1: 'rgb(111,154,211)'
    }
});

// vertical linear gradient
rect2.setGradient('fill', {
    type: 'linear',
    x1: 0,
    y1: -rect2.height / 2,
    x2: 0,
    y2: rect2.height / 2,
    colorStops: {
        0: '#ff4040',
        1: '#e6399b'
    }
});

// diagonal linear gradient
rect3.setGradient('fill', {
    type: 'linear',
    x1: -rect3.width / 2,
    y1: -rect3.height / 2,
    x2: rect3.width / 2,
    y2: rect3.height / 2,
    colorStops: {
        0: 'rgb(166,111,213)',
        0.5: 'rgba(106, 72, 215, 0.5)',
        1: '#200772'
    }
});

/**
 * setGradient radial gradients example
 */

// radial gradient
rect4.setGradient('fill', {
    type: 'radial',
    r1: rect4.width / 2,
    r2: 10,
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 0,
    colorStops: {
        0: '#FF4F4F',
        1: 'rgb(255, 239, 64)'
    }
});

// radial gradient
rect5.setGradient('fill', {
    type: 'radial',
    r1: rect5.width / 2,
    r2: 10,
    x1: 0,
    y1: 0,
    x2: rect4.width / 4,
    y2: rect4.height / 4,
    colorStops: {
        0: '#ffe47b',
        0.5: 'rgb(111,154,211)',
        1: 'rgb(166,111,213)'
    }
});

// radial gradient
rect6.setGradient('fill', {
    type: 'radial',
    r1: 50,
    r2: 80,
    x1: 45,
    y1: 45,
    x2: 52,
    y2: 50,
    colorStops: {
        0: 'rgb(155, 237, 0)',
        1: 'rgba(0, 164, 128,0.4)'
    }
});

canvas.renderAll();

Answer 2

您可以这样做：

    let cir = new fabric.Circle({
    left: 100,
    top: 100,
    radius: 30,
    fill: 'rgba(0, 0, 0, 0)'
})

cir.setGradient('fill', {
    type: 'radial',
    r1: 30,
    r2: 2,
    x1: 30,
    y1: 30,
    x2: 30,
    y2: 30,
    colorStops: {
        1: 'rgb(113,182,203)',
        0: 'rgba(0, 0, 0, 0)'
    }
});

fabricCanvas.add(cir);
fabricCanvas.renderAll();

http://jsfiddle.net/Kyashar/z6428pta/

fabricjs是否支持径向渐变？

2 个答案: