canvas-text-layout - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

package.json

 {
     "name": "canvas-text-layout",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "description": "canvas",
@@ -5,0 +5,0 @@ "main": "dist/bundle.js",

src/canvas.ts

 import { getMargin } from './help';
 
+enum type {
+    canvas = 'canvas',
+    dom = 'dom',
+}
+
 interface textConfig {
@@ -11,3 +16,11 @@ text: string;
     padding: string;
+    type: type;
 }
+let inputDiv: HTMLDivElement;
+
+const getLength = (str: string) => {
+    inputDiv.innerHTML = <string>new String(str.replace(/[ ]/g, '&nbsp;'));
+    return inputDiv.getBoundingClientRect().width;
+};
+
 export default class Canvas {
@@ -17,3 +30,5 @@ config: textConfig;
     ctx: CanvasRenderingContext2D;
+    dom: HTMLDivElement;
     body: HTMLElement;
+    rate: number;
 
@@ -23,6 +38,12 @@ constructor(config: textConfig) {
         this.body = document.body;
+        this.rate = window.devicePixelRatio;
 
-        this.canvasInit();
-        this.init();
-        //this.testCaseInit();
+        if (this.config.type === 'canvas') {
+            this.canvasInit();
+            this.init();
+            // this.testCaseInit();
+        } else {
+            this.domInit();
+            // this.testDomInit();
+        }
     }
@@ -53,2 +74,15 @@
 
+    testDomInit() {
+        const div = document.createElement('div');
+        div.style.width = this.config.width;
+        div.style.padding = this.config.padding;
+        div.style.color = this.config.color;
+        div.style.border = '1px solid black';
+        div.style.textAlign = 'center';
+        div.style.margin = '20px 0 0 0';
+        div.appendChild(this.dom);
+
+        this.body.appendChild(div);
+    }
+
     canvasInit() {
@@ -58,6 +92,47 @@ this.canvas = document.createElement('canvas');
         const size = this.init();
-        this.canvas.width = size.width;
-        this.canvas.height = size.height;
+        this.canvas.width = size.width * this.rate;
+        this.canvas.height = size.height * this.rate;
+        this.canvas.style.width = size.width + 'px';
+        this.canvas.style.height = size.height + 'px';
     }
 
+    domInit() {
+        if (!inputDiv) {
+            inputDiv = <HTMLDivElement>document.createElement('div');
+            inputDiv.style.position = 'absolute';
+            inputDiv.style.display = 'inline-block';
+            inputDiv.style.visibility = 'hidden';
+            inputDiv.style.fontSize = this.config.fontSize;
+            inputDiv.style.fontFamily = this.config.fontFamily;
+            document.body.appendChild(inputDiv);
+        }
+        const startX = parseInt(this.config.padding, 10);
+        const startY = startX;
+        const endX = parseInt(this.config.width, 10) - startX;
+        let beginX = startX;
+        let beginY = startY;
+        let maxWidth = 0;
+        for (const i of this.config.text) {
+            const width = getLength(i);
+            const eX = beginX + width;
+            if (eX > endX) {
+                if (beginX > maxWidth) {
+                    maxWidth = beginX;
+                }
+                beginX = startX + width;
+            } else {
+                beginX = eX;
+            }
+        }
+
+        this.dom = document.createElement('div');
+        this.dom.style.width = maxWidth + 'px';
+        this.dom.innerText = this.config.text;
+        this.dom.style.display = 'inline-block';
+        this.dom.style.fontSize = this.config.fontSize;
+        this.dom.style.fontFamily = this.config.fontFamily;
+        this.dom.style.textAlign = 'left';
+        this.dom.style.color = this.config.color;
+    }
+
     init() {
@@ -91,5 +166,6 @@ // 暂定4边padding等宽
         let beginY = startY;
+        const size = parseInt(this.config.fontSize, 10) * this.rate + 'px';
         this.ctx.save();
         this.ctx.fillStyle = this.config.color;
-        this.ctx.font = `${this.config.fontSize} ${this.config.fontFamily}`;
+        this.ctx.font = `${size} ${this.config.fontFamily}`;
         this.ctx.textBaseline = 'top';
@@ -108,6 +184,6 @@ let maxWidth = 0;
                 beginY += lineHeight;
-                this.ctx.fillText(i, beginX, beginY);
+                this.ctx.fillText(i, beginX * this.rate, beginY * this.rate);
                 beginX += width;
             } else {
-                this.ctx.fillText(i, beginX, beginY);
+                this.ctx.fillText(i, beginX * this.rate, beginY * this.rate);
                 beginX = eX;
@@ -114,0 +190,0 @@ }

src/index.ts

 import typesetting from './canvas';
+enum type {
+    canvas = 'canvas',
+    dom = 'dom',
+}
 
@@ -12,3 +16,14 @@ window.onload = () => {
         padding: '0px',
+        type: type.canvas,
     });
+    new typesetting({
+        text: '接通率=（未回应+已回应的线索量）÷（未接通+未回应+',
+        width: '104px',
+        fontSize: '14px',
+        lineHeight: '20px',
+        color: 'black',
+        fontFamily: 'mocrosoft yahei',
+        padding: '0px',
+        type: type.dom,
+    });
 };

No alert changes

Improved metrics

Total package byte prevSize

29093

11.54%

Lines of code

505

19.95%

No dependency changes