Mehrere Hintergrundfarbe in Leinwand Fabricjs

Hallo posible zwei Hintergrundfarbe in Leinwand hinzufügen fabricjs so etwas wie dies mit:Mehrere Hintergrundfarbe in Leinwand Fabricjs

Quelle

2016-03-24 Edin Puzic

Ja mit CSS Gradient es möglich ist. Ich habe eine Fiddle für Sie mit diesen Farben als Hintergrund erstellt.

canvas { 
    background: rgba(163,125,68,1); 
    background: -moz-linear-gradient(top, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%); 
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(163,125,68,1)), color-stop(50%, rgba(158,115,51,1)), color-stop(51%, rgba(158,17,17,1)), color-stop(100%, rgba(153,29,29,1))); 
    background: -webkit-linear-gradient(top, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%); 
    background: -o-linear-gradient(top, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%); 
    background: -ms-linear-gradient(top, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%); 
    background: linear-gradient(to bottom, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a37d44', endColorstr='#991d1d', GradientType=0); 
}

Der Gradient CSS ist aus cssmatic erzeugt.

Ich hoffe, es hilft.

Quelle

2016-03-24 12:02:47

Seine schlecht anwenden Gradienten erlauben Lösung becouse Ich muss die Farbe des Hintergrunds mit colorpicker –

ändern Es ist keine schlechte Lösung. Es ist eine schlechte Frage. Sie sollten das in der Frage erwähnt haben, und so oder so ist es möglich, css durch Javascript von colorPicker zu ändern. Aber für verschiedene Farben Hintergrund ist dieser Gradient css die beste Lösung. –

mit Hintergrundfarbe mit Stil festgelegt können Sie nicht den Inhalt in ein anderes Bild zu SVG exportieren, weder mit JSON serialisieren. – AndreaBogazzi

Sie kann nicht in der Lage für die Leinwand mehr Hintergrund zu verwenden, aber wir Hintergrund dynamisch erstellen und Farbe Stoff js auf das Objekt wie dies gelten ..

var canvas = new fabric.Canvas("c"); 
 

 
var bgrect = new fabric.Rect({ 
 
    left: 0, 
 
    top: 0, 
 
    width: canvas.getWidth(), 
 
    height: canvas.getHeight(), 
 
    selectable:false 
 
}); 
 

 

 
bgrect.setGradient('fill', { 
 
    x1: 0, 
 
    y1: 0, 
 
    x2: 0, 
 
    y2: bgrect.height, 
 
    colorStops: { 
 
    0: "rgba(163,125,68,1)", 
 
    0.5:"rgba(163,125,68,1)", 
 
    0.51:"rgba(153,29,29,1)", 
 
    1: "rgba(153,29,29,1)" 
 
    } 
 
}); 
 

 
canvas.add(bgrect) 
 
bgrect.sendToBack();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<canvas id="c"></canvas>

Quelle

2016-03-24 12:54:09

Jetzt, da Sie mich daran denken, ein Hintergrund-Feature als Farbverlauf sollte Fabricjs hinzugefügt werden. – AndreaBogazzi

Ja das könnte auch ein gutes Feature sein .. :-) –

Mehrere Hintergrundfarbe in Leinwand Fabricjs

Antwort

Verwandte Themen