摘要：之前我們學習了基礎(chǔ)用法現(xiàn)在我們開始一些好玩的我們先回顧設(shè)置一下正方形角度方法這是沒有動畫的都有方法那么正方形會從到有一個動畫過度從左到右進行變動逆時針轉(zhuǎn)度當然還支持這些方法圖片可以使用效果一次可以使用多個效果當然你也可以自己定義支持顏色

之前我們學習了基礎(chǔ)用法 現(xiàn)在我們開始一些好玩的

我們先回顧設(shè)置一下正方形角度方法

rect.set("angle", 45);

這是沒有動畫的

Fabric object都有animate方法

rect.animate("angle", 45, {
  onChange: canvas.renderAll.bind(canvas)
});

那么正方形會從0到45有一個動畫過度

從左到右進行變動

rect.animate("left", "+=100", { onChange: canvas.renderAll.bind(canvas) });

逆時針轉(zhuǎn)5度

rect.animate("angle", "-=5", { onChange: canvas.renderAll.bind(canvas) });

當然animate還支持這些方法

from: Allows to specify starting value of animatable property (if we don"t want 2. current value to be used).

duration: Defaults to 500 (ms). Can be used to change duration of an animation.

onComplete: Callback that"s invoked at the end of the animation.

easing: Easing function.

rect.animate("left", "+=100", {
    onChange: canvas.renderAll.bind(canvas),
    duration: 3000,
    easing: fabric.util.ease.easeOutBounce
});

圖片可以使用filter效果

fabric.Image.fromURL("pug.jpg", function(img) {

  // add filter
  img.filters.push(new fabric.Image.filters.Grayscale());

  // apply filters and re-render canvas when done
  img.applyFilters(canvas.renderAll.bind(canvas));

  // add image onto canvas
  canvas.add(img);
});

filter一次可以使用多個效果

當然 你也可以自己定義filter

fabric.Image.filters.Redify = fabric.util.createClass({

  type: "Redify",

  applyTo: function(canvasEl) {
    var context = canvasEl.getContext("2d"),
        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
        data = imageData.data;

    for (var i = 0, len = data.length; i < len; i += 4) {
      data[i + 1] = 0;
      data[i + 2] = 0;
    }

    context.putImageData(imageData, 0, 0);
  }
});

fabric.Image.filters.Redify.fromObject = function(object) {
  return new fabric.Image.filters.Redify(object);
};

fabric 支持 hex rgb rgba顏色

new fabric.Color("#f55");
new fabric.Color("#123123");
new fabric.Color("356735");
new fabric.Color("rgb(100,0,100)");
new fabric.Color("rgba(10, 20, 30, 0.5)");

并且支持相互轉(zhuǎn)換

new fabric.Color("#f55").toRgb(); // "rgb(255,85,85)"
new fabric.Color("rgb(100,100,100)").toHex(); // "646464"
new fabric.Color("fff").toHex(); // "FFFFFF"

兩種顏色可以疊加 并且你可以使用一些特定效果

var redish = new fabric.Color("#f55");
var greenish = new fabric.Color("#5f5");

redish.overlayWith(greenish).toHex(); // "AAAA55"
redish.toGrayscale().toHex(); // "A1A1A1"

可以使用漸變色

var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50
});

circle.setGradient("fill", {
  x1: 0,
  y1: -circle.height / 2,
  x2: 0,
  y2: circle.height / 2,
  colorStops: {
    0: "#000",
    1: "#fff"
  }
});

首先確定兩個點 在其距離中以百分比定位顏色

circle.setGradient("fill", {
  x1: -circle.width / 2,
  y1: 0,
  x2: circle.width / 2,
  y2: 0,
  colorStops: {
    0: "red",
    0.2: "orange",
    0.4: "yellow",
    0.6: "green",
    0.8: "blue",
    1: "purple"
  }
});

Multiline support. Native text methods unfortunately simply ignore new lines.

Text alignment. Left, center, right. Useful when working with multiline text.

Text background. Background also respects text alignment.

Text decoration. Underline, overline, strike-through.

Line height. Useful when working with multiline text.

如何添加文字

var text = new fabric.Text("hello world", { left: 100, top: 100 });
canvas.add(text);

fontFamily

var comicSansText = new fabric.Text("I"m in Comic Sans", {
  fontFamily: "Comic Sans"
});

fontSize

var text40 = new fabric.Text("I"m at fontSize 40", {
  fontSize: 40
});
var text20 = new fabric.Text("I"m at fontSize 20", {
  fontSize: 20
});

fontWeight

var normalText = new fabric.Text("I"m a normal text", {
  fontWeight: "normal"
});
var boldText = new fabric.Text("I"m at bold text", {
  fontWeight: "bold"
});

textDecoration

var underlineText = new fabric.Text("I"m an underlined text", {
  textDecoration: "underline"
});
var strokeThroughText = new fabric.Text("I"m a stroke-through text", {
  textDecoration: "line-through"
});
var overlineText = new fabric.Text("I"m an overline text", {
  textDecoration: "overline"
});

shadow

var shadowText1 = new fabric.Text("I"m a text with shadow", {
  shadow: "rgba(0,0,0,0.3) 5px 5px 5px"
});
var shadowText2 = new fabric.Text("And another shadow", {
  shadow: "rgba(0,0,0,0.2) 0 0 5px"
});
var shadowText3 = new fabric.Text("Lorem ipsum dolor sit", {
  shadow: "green -5px -5px 3px"
});

fontStyle

var italicText = new fabric.Text("A very fancy italic text", {
  fontStyle: "italic",
  fontFamily: "Delicious"
});
var anotherItalicText = new fabric.Text("another italic text", {
  fontStyle: "italic",
  fontFamily: "Hoefler Text"
});

stroke & strokeWidth

var textWithStroke = new fabric.Text("Text with a stroke", {
  stroke: "#ff1318",
  strokeWidth: 1
});
var loremIpsumDolor = new fabric.Text("Lorem ipsum dolor", {
  fontFamily: "Impact",
  stroke: "#c3bfbf",
  strokeWidth: 3
});

textAlign

var text = "this is
a multiline
text
aligned right!";
var alignedRightText = new fabric.Text(text, {
  textAlign: "right"
});

lineHeight

var lineHeight3 = new fabric.Text("Lorem ipsum ...", {
  lineHeight: 3
});
var lineHeight1 = new fabric.Text("Lorem ipsum ...", {
  lineHeight: 1
});

textBackgroundColor

var text = "this is
a multiline
text
with
custom lineheight
&background";
var textWithBackground = new fabric.Text(text, {
  textBackgroundColor: "rgb(0,200,0)"
})

怎么可以沒有事件呢

事件以on off使用 canvas 可以捕捉事件

mouseevent
"mouse:down", "mouse:move", and "mouse:up".

renderevent
"after:render".

selectionevent
"before:selection:cleared", "selection:created", "selection:cleared".

objectevent
object ones: "object:modified", "object:selected", "object:moving", "object:scaling", "object:rotating", "object:added", and "object:removed"

var canvas = new fabric.Canvas("...");
canvas.on("mouse:down", function(options) {
  console.log(options.e.clientX, options.e.clientY);
});

同樣這些事件也可以用任何fabric對象監(jiān)聽

var rect = new fabric.Rect({ width: 100, height: 50, fill: "green" });
rect.on("selected", function() {
  console.log("selected a rectangle");
});

var circle = new fabric.Circle({ radius: 75, fill: "blue" });
circle.on("selected", function() {
  console.log("selected a circle");
});