• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

CurriculumAssociates/canvas-latex: Bringing quick and beautiful math-typesetting ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称（OpenSource Name）：

CurriculumAssociates/canvas-latex

开源软件地址(OpenSource Url)：

https://github.com/CurriculumAssociates/canvas-latex

开源编程语言(OpenSource Language)：

JavaScript 100.0%

开源软件介绍(OpenSource Introduction)：

CanvasLatex

Bringing quick math-typesetting rendering to the canvas

Alt Text

JavaScript Style Guide

JavaScript Style Guide Test with Jest

Try it yourself

npm install

npm start

The Commands

To see a basic list of supported commands, it's recommended to look in test/selenium/expressions.yml. If you want to see their rendered results, you can do so by either running the tests, or by copy/pasting into the input field when the server is running.

This project is built on top of the open-source project KaTeX. You can find a full list of their supported functions here: https://khan.github.io/KaTeX/function-support.html. Please not that not all are supported yet.

Renderers

CanvasLatex is written in a way which should support any Canvas based renderer. The NodeBuilder creates "VirtualCanvasNodes" which are renderer agnostic models.

Currently supported renderers include:

  1. CreateJS

  2. PixiJS

Future renderer support could include:

  1. ThreeJS (3D rendering?)

  2. Node Canvas

  3. FabricJS

  4. Raw Canvas

API

Constructor

const widget = new Widget(latex: string, options: object)

Options

Name Type Default Description
baseSize {Integer} 44 The base font size for the latex rendering. Note: This may be larger/smaller depending on the specific latex (i.e. an exponent will render in a smaller font.
displayMode {Boolean} false If true the math will be rendered in display mode, which will put the math in display style (so \int, \frac and \sum are large, for example)
debugBounds {Boolean} false Displays a rectangle around the Widget's bounds.
defaultTextColor {String} black Allows the default text color to be changed by specifying a string (e.g. yellow) or a hex value.
macros {Object} {} A collection of custom macros. Each macro is a property with a name like \name (written "\name" in JavaScript) which maps to a string that describes the expansion of the macro. Single-character keys can also be included in which case the character will be redefined as the given macro (similar to TeX active characters). The property name can map to either a string, or a function which contains a "context" argument. Example: macros: { "\\RR": "\\mathbb{R}"}
strict {Boolean} warn If false or "ignore", allow features that make writing LaTeX convenient but are not actually supported by (Xe)LaTeX (similar to MathJax). If true or "error" (LaTeX faithfulness mode), throw an error for any such transgressions. If "warn" (the default), warn about such behavior via console.warn. Provide a custom function handler(errorCode, errorMsg, token) to customize behavior depending on the type of transgression (summarized by the string code errorCode and detailed in errorMsg); this function can also return "ignore", "error", or "warn" to use a built-in behavior.
sizeIndex {Number} 6 The default size index for the fonts. The size mapping is as follows: [ null, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.2, 1.44, 1.728, 2.074, 2.488 ]. The numbers represent the scale factors applied to fonts. A number of 6 maps to 1.0, a number of 7 maps to 1.2, etc.
alignment {String} center The default alignment when using newlines (\newline, \, etc.). Options are 'center', 'left', 'right'.

Methods

Method Args Return Value Description
getObjectsByClass name: {String} Array<DisplayObject> Returns a flattened 1d array of all createjs.DisplayObject's with the specified className. For example, when calling getObjectsByClass('a') with the latex: \class{a}{ab} \class{a}{c}, the return value will be a 1d array with "a" at index 0, "b" at index 1, and "c" in index 2. The array indexes are not distinguishable based on how they appear in the latex, and thus should not be relied on.
getObjectsByClassSeparated name: {String} Array<Array<DisplayObject>> Returns a 2d array of createjs.DisplayObject's separated by their className. For example, when calling getObjectsByClassSeparated('a') with the latex: \class{a}{ab} \class{a}{c}, the return value will be a 2d array with ["a", "b"] at index 0 and ["c"] at index 1. The return values are distinguishable based on how they appear separated in the latex, and can be relied on as such.

Properties

Method Type Description
latex get Returns the latex value as a string
latex set Re-renders with the given latex value
classes get Gets a full list of classes applied to the widget
distanceToBaseline get Gets the distance to the baseline from the top of the widget

Fonts

Loading the Fonts

Since canvas doesn't load fonts automatically, you can use the WebFontLoader. See demo/demo.js for an example. Additionally you'll need to make sure the fonts are available via the css. We leverage Katex's CSS file as it contains the fonts we need. You can use their CDN here: https://cdnjs.com/libraries/KaTeX. Or, you can include the fonts locally.

License

CanvasLatex is licensed under the MIT License. https://opensource.org/licenses/MIT

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
WalletConnect/kotlin-walletconnect-lib: library to use WalletConnect with Kotlin ...发布时间：2022-07-07
下一篇：
zhanghai/zju-csse-undergraduate-design-latex-template: 浙江大学计算机科学与技术 ...发布时间：2022-07-09
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap