fabricjs 相关问题

</...</desc> <question vote="0"> <pre><code><html lang="en"> <header> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script> </header> <body> <canvas id="canvas"> </canvas> <script> let json; let pageJSON; var canvas; var element; const STAGE_RESOURCE_BASE = "https://d33r26vb2a4c28.cloudfront.net/photoadking-test/"; const HOST = { USER_UPLOADED_FONT: STAGE_RESOURCE_BASE } const json_data = { "requestData": { "json_data": { "344516": { "background_json": { "background_image": "", "background_color": "" }, "sample_image": "", "height": 800, "width": 650, "display_height": "800", "display_width": "650", "display_size_type": "px", "user_template_category": "Flyer", "is_featured": 0, "is_portrait": 0, "page_id": 344516, "page_index": 1, "canvasJSON": { "objects": [ { "type": "i-text", "originX": "left", "originY": "top", "left": 136, "top": 360, "width": 417.94921875, "height": 118.65, "fill": "#000000", "stroke": "#ffffff", "strokeWidth": 0, "strokeDashArray": null, "strokeLineCap": "butt", "strokeLineJoin": "miter", "strokeMiterLimit": 10, "scaleX": 1, "scaleY": 1, "angle": 0, "flipX": false, "flipY": false, "opacity": 1, "shadow": { "color": "#000000", "blur": 0, "offsetX": 0, "offsetY": 0, "affectStroke": false }, "visible": true, "clipTo": null, "backgroundColor": "", "fillRule": "nonzero", "globalCompositeOperation": "source-over", "transformMatrix": null, "skewX": 0, "skewY": 0, "text": "નમસ્તે Hello शहर", "fontSize": 60, "fontWeight": "", "fontFamily": "Roboto-Regular", "fontStyle": "", "lineHeight": 1.16, "textDecoration": "", "textAlign": "left", "textBackgroundColor": "", "charSpacing": 0, "excludeFromExport": false, "_controlsVisibility": { "tl": true, "tr": true, "br": true, "bl": true, "ml": false, "mt": false, "mr": false, "mb": false, "mtr": true }, "isLocked": false, "styles": { "0": { "1": {} } }, "customSourceType": "text_json", "bg_image": "", "texture_image": "", "id": 795113, "index": 0 } ], "overlayImage": "" }, "threedObject": [], "svg_json": [], "tool_json": [] } }, "totalCanvasObject": 1, "zoomLevel": 75, "my_design_id": "7wtwv41ef91417", "pages_sequence": [ 344516 ], } } json = json_data.requestData; pageStack = json_data.requestData.pages_sequence original_pageStack = [...pageStack] currentPage = pageStack[0]; loadCanvas(currentPage).then(() => { }) async function loadCanvas(currentPageId) { let promises = [] let promiseLength fabric.crossOrigin = "anonymous"; pageJSON = json.json_data[currentPageId] if (pageJSON) { pageJSON.canvasJSON.overlayImage = ''; element = document.getElementById('canvas'); canvas = new fabric.Canvas(element); canvas.setWidth(pageJSON.width); canvas.setHeight(pageJSON.height); if (pageJSON.canvasJSON.objects.length > 0) { for (var i = 0; i < pageJSON.canvasJSON.objects.length; i++) { if (i == pageJSON.canvasJSON.objects.length - 1) { loopAllFontFirst().then(async (result) => { fabric.util.clearFabricFontCache(); canvas.loadFromJSON(pageJSON.canvasJSON, async () => { canvas.renderAll.bind(canvas); }); }); } } } } } function loopAllFontFirst() { let promises = []; if (pageJSON.canvasJSON.objects) { pageJSON.canvasJSON.objects.forEach(element => { if (element.type == 'i-text' || element.type == 'curved-text') { promises.push(loadFontToDocument(element)); } else { promises.push([]) } }); } if (promises.length > 0) { return new Promise(resolve => { Promise.all(promises).then((results) => { resolve(); }).catch((e) => { resolve(); }); }); } } async function loadFontToDocument(element) { return new Promise((resolve) => { if (element.font_path && element.font_path != '') { if (element.font_path.split('/')[0] == 'user_uploaded_fonts') { let font_path = element.font_path.replaceAll(' ', '%20') var f = new FontFace(element.fontFamily, `url(${HOST.USER_UPLOADED_FONT + font_path})`); f.load(null, 5000).then(function (loadedFace) { document.fonts.add(loadedFace); canvas.renderAll() resolve(element) }).catch(function (error) { console.log(error, "error") }); } else { let local_font_path = element.font_path.replaceAll(' ', '\ ') const LOCAL_URL = `"../../assets/fonts/pak/${element.font_path.split('/')[1]}"` var f = new FontFace(element.fontFamily, `url(${LOCAL_URL})`); f.load().then(function (loadedFace) { document.fonts.add(loadedFace); canvas.renderAll(); resolve(element) }).catch(function (error) { console.log(error, "error") }); } } else { // const LOCAL_URL = '../../assets/fonts/pak/Roboto-Regular.ttf' const LOCAL_URL = 'https://d3jmn01ri1fzgl.cloudfront.net/photoadking/fonts/Roboto-Regular.ttf' var f = new FontFace(element.fontFamily, `url(${LOCAL_URL})`);//'url(./fonts/Roboto-Regular.ttf)') f.load().then(function (loadedFace) { document.fonts.add(loadedFace); canvas.renderAll(); resolve(element) }).catch(function (error) { console.log(error, "error") }); } }) } </script> </body> </html> </code></pre> <p>在 Fabric Canvas i-Text 的背景下，我们遇到了一个问题，即具有 Roboto-Regular fontFamily 渲染的文本在 Windows 和 Linux 系统上对于非英语语言的行为有所不同。具体来说，当我们尝试以英语以外的语言显示文本时，两个操作系统之间用于渲染的字体会有所不同。</p> <p><a href="https://i.stack.imgur.com/87uMz.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzg3dU16LnBuZw==" alt="Linux Output"/></a></p> <p><a href="https://i.stack.imgur.com/yVwwY.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3lWd3dZLnBuZw==" alt="windows output"/></a></p> <p>我的目标是确保跨 Windows 和 Linux 平台的统一文本渲染，特别是在处理非英语字符时。</p> </question> <answer tick="false" vote="0"> <p>Linux 上的字体无法正确加载，这可能是由于多种原因造成的。您可以采取以下一些步骤来解决 Linux 环境中 FabricJS 中的字体加载问题。</p> <p><strong>使用网页字体加载器</strong></p> <p>为了确保在渲染画布之前加载字体，您可以使用网络字体加载器，例如 Google 提供的加载器。</p> <pre><code>WebFont.load({ google: { families: ['Roboto:regular'] }, active: function() { canvas.renderAll(); } }); </code></pre> </answer> </body></html>

canvas itext fabricjs non-english latin

回答 0 投票 0

如何在fabric js中更改旋转光标

我想当鼠标悬停在旋转控件上时获得顺时针旋转的圆圈图标而不是默认的十字线图标。旋转图标我尝试使用设置 mtr 属性，但无法获取

javascript object user-interface fabricjs

回答 1 投票 0

fabricjs 相关问题

最新问题