huozi - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

example/demo.js

@@ -7,12 +7,6 @@ import huozi from '../index';
 
-/**
- * Input:
- * {
- *   fontSize: 26,
- *   character: ''
- * }
- */
-const textSequence = mixed.trim().replace('\n', '').split('').map(value => {
+function drawText(text, options) {
+  const textSequence = text.trim().replace('\n', '').split('').map(value => {
     return {
-      fontSize: 26,
+      fontSize: +options.charFontSize || 18,
       character: value
@@ -22,16 +16,54 @@ }
 
+  const layoutSequence = huozi(textSequence, {
+    fontSize: +options.fontSize || 18,
+    column: +options.column || 35,
+    inlineCompression: options.compress === undefined ? options.compress : true
+  });
 
-const layoutSequence = huozi(textSequence);
+  console.log(layoutSequence);
 
-console.log(layoutSequence);
+  context.clearRect(0, 0, 800, 600);
+  context.strokeStyle = '#999';
 
-context.clearRect(0, 0, 800, 600);
-context.strokeStyle = '#999';
+  for (const char of layoutSequence) {
+    context.font = `${char.fontSize}px sans-serif`;
+    context.textBaseline = 'hanging';
+    context.fillText(char.character, char.x, char.y);
 
-for (const char of layoutSequence) {
-  context.font = `${char.fontSize}px sans-serif`;
-  context.textBaseline = 'hanging';
-  context.fillText(char.character, char.x, char.y);
+    options.stroke && context.strokeRect(char.x, char.y, char.width, char.height);
+  }
+}
 
-  context.strokeRect(char.x, char.y, char.width, char.height);
+
+/* for demo */
+
+const handler = function (e) {
+  const obj = {};
+  $('#form').serializeArray().map(value => {
+    obj[value.name] = value.value;
+  });
+  drawText(obj['text'], obj);
+};
+
+let id = 0;
+$('#form').on('change input', function (e) {
+  if (id) {
+    clearTimeout(id);
+  }
+  id = setTimeout(handler, 300, e);
+});
+
+function fillTextArea(num) {
+  if (num === 1) {
+    textBox.textContent = beiying;
+  } else if (num === 2) {
+    textBox.textContent = lorem;
+  } else {
+    textBox.textContent = mixed;
+  }
+  handler();
 }
+
+window.fillTextArea = fillTextArea;
+
+fillTextArea(1);

example/text.js

@@ -1,3 +0,3 @@
-export const beiying = `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 我与父亲Lorem elit不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”
-　　回家变卖典质，父亲还←⿰了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。
+export const beiying = `我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”
+　　回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。
 　　到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”
@@ -4,0 +4,0 @@ `;

index.js

@@ -27,3 +27,3 @@ /*!
 
-export default function huozi(textSequence, layoutOptions = {
+const defaultOptions = {
   fontSize: 26,
@@ -39,4 +39,8 @@ column: 25,
   forceSpaceBetweenCJKAndWestern: false
-}) {
+};
 
+export default function huozi(textSequence, layoutOptions) {
+
+  layoutOptions = Object.assign({}, defaultOptions, layoutOptions);
+
   const {
@@ -43,0 +47,0 @@ fontSize,

package.json

 {
   "name": "huozi",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A simple typography engine for CJK languages, especially designed for game rich-text.",
@@ -8,2 +8,3 @@ "main": "index.js",
     "dev": "webpack-dev-server --config webpack.config.example.js --hot --host 0.0.0.0 --port 8000 --devtool source-map",
+    "publish-demo": "webpack --config webpack.config.example.js -p",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -10,0 +11,0 @@ },

README.md

@@ -92,2 +92,29 @@ <h1 align="center" style="    font-family: STSong, SimSun, serif; border: none; font-size: 48px; margin-bottom: 0;">
 
+参数详解：
+
+```js
+function huozi(textSequence, layoutOptions = {
+  // 排版用字号（即一个em多宽，与 textSequence 中的 fontSize 不同）
+  fontSize: 26,
+  // 每行字数
+  column: 25,
+  // 行数
+  row: Infinity,
+  // 字距（仅 CJK 文字）
+  xInterval: 0,
+  // 行距
+  yInterval: 12,
+  // 字符间距（仅西文文字）
+  letterSpacing: 0,
+  // 开启行内标点压缩
+  inlineCompression: true,
+  // 强制纵横对齐
+  forceGridAlignment: true,
+  // 西文优先
+  westernCharacterFirst: false,
+  // 若纵横对齐导致无空格间隔，则强制在两边加入至少 1/4em 宽空格
+  forceSpaceBetweenCJKAndWestern: false
+})
+```
+
 ## 参与项目
@@ -94,0 +121,0 @@

webpack.config.example.js

@@ -9,2 +9,3 @@ var fs = require('fs');
     path: path.resolve(__dirname, './example-dist'),
+    publicPath:"/example-dist/",
     filename: "demo.js",
@@ -25,3 +26,3 @@ libraryTarget: 'umd'
   devServer: {
-    contentBase: './example/',
+    contentBase: './',
     historyApiFallback: true,
@@ -28,0 +29,0 @@ disableHostCheck: true,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

189246

increased by2.67%

Lines of code

425

increased by7.05%

Number of lines in readme file

130

increased by26.21%

No dependency changes