如何編輯FabricJS IText並應用新樣式（例如突出顯示等）

我想使用fabric.js編輯畫布中文本中突出顯示的字符，例如更改其顏色，字體，樣式等。如何編輯FabricJS IText並應用新樣式（例如突出顯示等）

就這樣http://fabricjs.com/test/misc/itext.html

到@ user43250937 哎嗯。我試了一下，它的工作原理！：D謝謝。我試過下劃線，粗體，斜體，但我改變了文本的顏色有問題，我想：

// "cinput" is the id of the color picker. 


addHandler('cinput', function(obj) { 
    var color = $("#cinput").val(); 

    var isColor = (getStyle(obj, 'fill') || '').indexOf(color) > -1; 

    setStyle(obj, 'fill', isColor ? '' : color); 

});

來源

2015-04-29 Joker

@ user43250937感謝您的幫助！：D – Joker

沒問題@Joker！ –

爲什麼setStyle用'fontWeight'？對於文本顏色是'fill'，而對於背景顏色使用'textBackgroundColor'。 –

通常不回答你嘗試過什麼樣的描述，什麼也沒有在這裏工作被完全忽視，我回答這一次，因爲fabricjs庫是相當複雜的，有時文檔有點缺乏...

該頁面的樣本爲IText object，文本可以在位編輯（基本內容fabricjs文本對象只能通過javascript從外部修改）。

建設有不同風格的靜態iText的對象應用很簡單：

HTML：

<canvas id="canv" width="250" height="300" style="border: 1px solid rgb(204, 204, 204); width: 400px; height: 400px; -webkit-user-select: none;"></canvas>

的Javascript：

var canvas=new fabric.Canvas('canv'); 

var iTextSample = new fabric.IText('hello\nworld', { 
    left: 50, 
    top: 50, 
    fontFamily: 'Helvetica', 
    fill: '#333', 
    lineHeight: 1.1, 
    styles: { 
    0: { 
     0: { textDecoration: 'underline', fontSize: 80 }, 
     1: { textBackgroundColor: 'red' } 
    }, 
    1: { 
     0: { textBackgroundColor: 'rgba(0,255,0,0.5)' }, 
     4: { fontSize: 20 } 
    } 
    } 
}); 

canvas.add(iTextSample);

鏈接JSFiddle

正如您所看到的，您只需爲每行的每個字符指定樣式（首先爲hello行，然後爲world行）。

如果你想要的東西，動態的，選擇一些文本和改變外觀/風格還有一些工作要做的能力，你需要：

添加一個按鈕或可點擊元素對於您想要動態應用的每種樣式（粗體，斜體，更改顏色，更改背景等）
爲每個按鈕添加一個點擊監聽器，其中有一些代碼可以改變IText中選定文本的樣式。

您需要使用添加處理程序，你會爲每一個樣式的按鈕重複使用基本功能：

function addHandler(id, fn, eventName) { 
    document.getElementById(id)[eventName || 'onclick'] = function() { 
    var el = this; 
    if (obj = canvas.getActiveObject()) { 
     fn.call(el, obj); 
     canvas.renderAll(); 
    } 
    }; 
}

和一些輔助功能改變風格：

function setStyle(object, styleName, value) { 
    if (object.setSelectionStyles && object.isEditing) { 
    var style = { }; 
    style[styleName] = value; 
    object.setSelectionStyles(style); 
    } 
    else { 
    object[styleName] = value; 
    } 
} 

function getStyle(object, styleName) { 
    return (object.getSelectionStyles && object.isEditing) 
    ? object.getSelectionStyles()[styleName] 
    : object[styleName]; 
} 


addHandler('underline', function(obj) { 
    var isUnderline = (getStyle(obj, 'textDecoration') || '').indexOf('underline') > -1; 
    setStyle(obj, 'textDecoration', isUnderline ? '' : 'underline'); 
});

Link to working JSFiddle與一個工作下劃線按鈕。

如您所見，涉及到一些編碼，但並不那麼複雜，對於可用樣式選項的完整列表，您可以查看fabricjs文檔。

來源

2015-04-29 05:25:27

如何編輯FabricJS IText並應用新樣式（例如突出顯示等）

回答

相關問題