v1.1.10

等比例缩放各类元素

example/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, Menu, session,ipcMain  } = require('electron');
+const { app, BrowserWindow, Menu, session, ipcMain, screen  } = require('electron');
 const path = require('path');
 const fs = require('fs');
 const crypto = require('crypto');
@@ -64,9 +64,13 @@ function createWindow() {
   const directoryToDecrypt = isDev ? path.join(__dirname, 'build', 'static') : path.join(process.resourcesPath, 'app.asar', 'static');
   decryptDirectory(directoryToDecrypt);
 
+  const { width, height } = screen.getPrimaryDisplay().workAreaSize;
+  console.log(`Screen resolution: ${width}x${height}`);
+  const WIDTH = parseInt(1600 * width / 1920)
+  const HEIGHT = parseInt(900 * width / 1920)
   const win = new BrowserWindow({
-    width: 1600,
-    height: 900,
+    width: WIDTH,
+    height: HEIGHT,
     icon: path.join(__dirname, 'favicon.ico'), // 设置窗口图标
     webPreferences: {
       preload: path.join(__dirname, 'src', 'preload.js'), // 确认预加载脚本路径正确

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "heatmap",
   "homepage": ".",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "private": true,
   "main": "main.js",
   "scripts": {

src/index.js

@@ -61,6 +61,8 @@ export default class StockHeatmap extends React.Component {
   drawTimestampDistance = parseInt(1000 / 60);
   // 上次绘制时间
   prevDrawTimestamp = 0;
+  // 绘制字体大小
+  bottomFontSize = 12
 
   orderbookColors = [
     '#086892',
@@ -311,6 +313,22 @@ export default class StockHeatmap extends React.Component {
       return;
     }
 
+    // 字体大小设置
+    this.bottomFontSize = parseInt(12 * this.defaults.hmWidth() / 1600)
+    this.defaults.bidAskWidth = parseInt(100 * this.defaults.hmWidth() / 1600)
+    this.defaults.axisYWidth = parseInt(50 * this.defaults.hmWidth() / 1600)
+    this.defaults.axisXHeight = parseInt(50 * this.defaults.hmWidth() / 1600)
+    this.defaults.axisTickSize = parseInt(6 * this.defaults.hmWidth() / 1600)
+    this.defaults.xAxisTextPadding = parseInt(6 * this.defaults.hmWidth() / 1600)
+    this.defaults.yAxisTextPadding = parseInt(6 * this.defaults.hmWidth() / 1600)
+    this.defaults.bidAskGraphPaddingLeft = parseInt(10 * this.defaults.hmWidth() / 1600)
+    this.defaults.borderPadding = [
+      parseInt(5 * this.defaults.hmWidth() / 1600),
+      parseInt(5 * this.defaults.hmWidth() / 1600),
+      0,
+      0
+    ]
+
     // 1. update scale and dimensions
     this.updateHeatmapDimensions();
 
@@ -370,8 +388,9 @@ export default class StockHeatmap extends React.Component {
       }
     });
     if (drawPending.length > 0) {
-      const WIDTH = 100
-      const HEIGHT = drawPending.length * 45
+      const LINE_HEIGHT = parseInt(45 * this.defaults.hmWidth() / 1600)
+      const WIDTH = parseInt(100 * this.defaults.hmWidth() / 1600)
+      const HEIGHT = parseInt(drawPending.length * LINE_HEIGHT * this.defaults.hmWidth() / 2500)
 
       // 绘制方块
       let color = d3.color('#fff').rgb();
@@ -383,16 +402,18 @@ export default class StockHeatmap extends React.Component {
         WIDTH,
         HEIGHT
       );
+      this.drawingContext.font = `${this.bottomFontSize}px Arial`;
 
       // 绘制方块内数据
+      const FONT_SIZE = this.bottomFontSize
       drawPending.map((d, index) => {
         let depth = d.marketDepth;
         let text = depth.lastSellQty !== 0 ? `卖出 ${depth.lastSellQty} 在 ${depth.lastSellPrice}` : `买入 ${depth.lastBuyQty} 在 ${depth.lastBuyPrice}`
         context.fillStyle = d3.color(depth.side === 'sell' ? '#222' : '#222').rgb();
-        context.fillText(`${d.ts}`, x + 10, y + 7 + 15 + index * 45);
-        context.fillText(text, x + 10, y + 7 + 30 + index * 45);
+        context.fillText(`${d.ts}`, x + 10, y + 7 + FONT_SIZE + index * LINE_HEIGHT);
+        context.fillText(text, x + 10, y + 7 + FONT_SIZE*2 + index * LINE_HEIGHT);
         if (index < drawPending.length - 1) {
-          context.fillText("--------------", x + 10, y + 7 + 45 + index * 45);
+          context.fillText("--------------", x + 10, y + 7 + LINE_HEIGHT + index * LINE_HEIGHT);
         }
       })
     }
@@ -439,7 +460,7 @@ export default class StockHeatmap extends React.Component {
       //   const newBSTPFactor = (buyT20RunningSum / sellT20RunningSum);
       //   this.drawingContext.fillText(newBSTPFactor.toFixed(2), x + w /4, y + textHeight *0.5);
       // }
-      this.drawingContext.font = `bold ${13}px sans-serif`;
+      this.drawingContext.font = `bold ${this.bottomFontSize}px sans-serif`;
       this.drawingContext.textBaseline = 'bottom';
       this.drawingContext.fillText(`买卖比: ${(d.marketDepth.buyOrderVolume / d.marketDepth.sellOrderVolume).toFixed(2)}`, x + w / 2, y + textHeight * 2 + 5);
       this.drawingContext.restore();
@@ -456,6 +477,7 @@ export default class StockHeatmap extends React.Component {
       this.defaults.hmWidth(), this.defaults.axisXHeight, this.defaults.clearColor
     );
     // draw axis
+    this.drawingContext.font = `${this.bottomFontSize}px sans-serif`;
     this.drawingContext.save();
     this.drawingContext.beginPath();
     this.drawingContext.translate(this.defaults.borderPadding[3], this.defaults.borderPadding[0] + this.defaults.hmHeight());
@@ -465,7 +487,8 @@ export default class StockHeatmap extends React.Component {
     this.drawingContext.textBaseline = 'top';
     // const assumedTextWidth = this.drawingContext.measureText('77:77:77').width + 20;
     // const maxTickInterval = this.defaults.hmWidth() / assumedTextWidth;
-    const bandInterval = Math.max(1, parseInt(this.windowedData.length / (this.defaults.hmWidth() / 102)));
+    const INTERVAL = parseInt(102 * this.defaults.hmWidth() / 1600)
+    const bandInterval = Math.max(1, parseInt(this.windowedData.length / (this.defaults.hmWidth() / INTERVAL)));
     // console.log('bandInterval=', bandInterval);
     let panel = this;
     this.windowedData.map((d, i) => {
@@ -479,7 +502,7 @@ export default class StockHeatmap extends React.Component {
       }
     });
     this.drawingContext.textAlign = 'left';
-    this.drawingContext.font = '12px Arial';
+    this.drawingContext.font = `${this.bottomFontSize}px Arial`;
 
     // ========================================= 底部文字绘制 =========================================
     // 绘制品种
@@ -499,7 +522,7 @@ export default class StockHeatmap extends React.Component {
     this.drawingContext.fillText(maxVolumeText, 20 + w + 20, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
     this.drawingContext.fillStyle = this.defaults.textHighlightOnBackground;
     w += this.drawingContext.measureText(maxVolumeText).width;
-    this.drawingContext.font = 'bold 12px Arial';
+    this.drawingContext.font = `bold ${this.bottomFontSize}px Arial`;
     this.drawingContext.fillText(`${maxVolumeInWindowData}`, 20 + w + 20, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
     w += this.drawingContext.measureText(`${maxVolumeInWindowData}`).width;
 
@@ -507,7 +530,7 @@ export default class StockHeatmap extends React.Component {
     let latested = this.windowedData[this.windowedData.length - 1]
     if (this.windowedData.length > 0) {
       this.drawingContext.fillStyle = this.defaults.textOnBackground;
-      this.drawingContext.font = '12px Arial';
+      this.drawingContext.font = `${this.bottomFontSize}px Arial`;
       this.drawingContext.fillText(`
         最后交易价格:  ${latested.marketDepth.side === 'buy' ? latested.marketDepth.lastBuyPrice : latested.marketDepth.lastSellPrice}
         最后交易数量:  ${latested.marketDepth.side === 'buy' ? latested.marketDepth.lastBuyQty : latested.marketDepth.lastSellQty}
@@ -545,6 +568,7 @@ export default class StockHeatmap extends React.Component {
         let y = this.yScale(d) + yh2;
         this.drawingContext.moveTo(0, y);
         this.drawingContext.lineTo(this.defaults.axisTickSize, y);
+        this.drawingContext.font = `${this.bottomFontSize}px Arial`;
 
         // 大于7位，换行绘制
         if (String(d).length <= 7) {
@@ -606,6 +630,8 @@ export default class StockHeatmap extends React.Component {
         this.drawingContext.translate(x, y);
         this.drawingContext.lineWidth = 0;
         this.drawingContext.textBaseline = 'middle';
+        this.drawingContext.font = `${this.bottomFontSize}px Arial`;
+
         const drawBars = (arr, color, textColor) => {
           arr.map(v => {
             this.drawingContext.fillStyle = color;