如何在JSXGraph中根据屏幕尺寸动态调整线条描边宽度？

核心思路 #

JSXGraph本身不支持直接用百分比设置描边宽度，但可以通过监听画板的resize事件，根据当前画板的实际尺寸计算合适的描边宽度值，再动态更新线条属性。

具体实现步骤 #

• 监听画板尺寸变化：利用JSXGraph的board.on('resize', callback)方法绑定resize事件，每次画板尺寸改变时触发回调函数。
• 计算描边宽度：基于画板的宽度或高度设置比例，比如按画板宽度的0.1%计算：

  const strokeWidth = board.canvasWidth * 0.001;
  

  这里的比例可按需调整，且JSXGraph支持非整数的描边宽度值，无需局限于整数。
• 更新线条属性：在resize回调中，调用线条对象的setProperty方法更新strokeWidth：

  line.setProperty({ strokeWidth: strokeWidth });
  

完整示例代码 #

// 创建画板
const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-10, 10, 10, -10],
    axis: true
});

// 创建示例线条
const line = board.create('line', [[-5, -5], [5, 5]], {
    strokeWidth: 2 // 初始宽度
});

// 定义resize处理函数
function handleResize() {
    // 按画板宽度的0.1%计算新描边宽度
    const newStrokeWidth = board.canvasWidth * 0.001;
    // 更新线条属性
    line.setProperty({ strokeWidth: newStrokeWidth });
}

// 绑定resize事件
board.on('resize', handleResize);

// 初始化时执行一次，确保适配初始尺寸
handleResize();

补充说明 #

• 若需基于高度计算，只需将board.canvasWidth替换为board.canvasHeight，也可结合两者取平均值提升适配性。
• JSXGraph的strokeWidth支持浮点数，能实现更精细的宽度调整。

内容的提问来源于stack exchange，提问作者Ferenc Beleznay