Web项目虚拟屏幕分区开发：求推荐JavaScript绘图与区域尺寸获取类库

Absolutely, there are several solid JavaScript libraries that can simplify your virtual screen setup, area division, and dimension tracking across devices. Let me break down some top options with practical use cases:

1. Fabric.js #

• Why it fits: A robust, feature-rich Canvas library that makes it trivial to create, manipulate, and track graphical elements (your "regions"). It handles scaling for different device sizes out of the box, and gives you easy access to element dimensions and positions.
• Quick example:

  // Initialize canvas
  const canvas = new fabric.Canvas('virtual-screen', {
    width: window.innerWidth,
    height: window.innerHeight
  });
  
  // Create a region (rectangle)
  const region1 = new fabric.Rect({
    left: 50,
    top: 50,
    width: 200,
    height: 150,
    fill: 'rgba(255,0,0,0.2)',
    stroke: 'red'
  });
  canvas.add(region1);
  
  // Get region dimensions anytime
  console.log('Region 1 width:', region1.width);
  console.log('Region 1 height:', region1.height);
  
  // Handle responsive resizing
  window.addEventListener('resize', () => {
    canvas.setWidth(window.innerWidth);
    canvas.setHeight(window.innerHeight);
    canvas.renderAll();
    // Scale regions proportionally if needed
    region1.scaleToWidth(window.innerWidth * 0.2);
  });
  

2. Konva.js #

• Why it fits: Built specifically for interactive 2D graphics, Konva uses layers and groups to organize elements, making it easy to manage your virtual screen regions. It has excellent support for responsive design and provides straightforward methods to get element bounds.
• Quick example:

  // Initialize stage
  const stage = new Konva.Stage({
    container: 'virtual-screen',
    width: window.innerWidth,
    height: window.innerHeight
  });
  
  // Create a layer for regions
  const layer = new Konva.Layer();
  stage.add(layer);
  
  // Add a region
  const region2 = new Konva.Rect({
    x: 300,
    y: 50,
    width: 180,
    height: 200,
    fill: 'rgba(0,255,0,0.2)',
    stroke: 'green'
  });
  layer.add(region2);
  layer.draw();
  
  // Get region dimensions and position
  const bounds = region2.getClientRect();
  console.log('Region 2 bounds:', bounds); // Contains width, height, x, y
  
  // Responsive resize
  window.addEventListener('resize', () => {
    stage.width(window.innerWidth);
    stage.height(window.innerHeight);
    // Adjust region size relative to stage
    region2.width(stage.width() * 0.18);
    region2.draw();
  });
  

3. Paper.js #

• Why it fits: A lightweight vector graphics library that works with Canvas. It's great if you need precise control over regions (even non-rectangular ones) and want an intuitive API for getting element dimensions.
• Quick example:

  // Setup canvas
  const canvas = document.getElementById('virtual-screen');
  paper.setup(canvas);
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  // Create a region
  const region3 = new paper.Path.Rectangle({
    point: [500, 50],
    size: [220, 160],
    fillColor: 'rgba(0,0,255,0.2)',
    strokeColor: 'blue'
  });
  
  // Get region dimensions
  console.log('Region 3 size:', region3.bounds.size); // { width: 220, height: 160 }
  
  // Handle resize
  window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    paper.view.viewSize = new paper.Size(window.innerWidth, window.innerHeight);
    // Scale region relative to base screen size
    region3.scale(window.innerWidth / 1920);
    paper.view.draw();
  });
  

Honorable Mention: Native JS + CSS Grid/Flexbox #

If you don't need heavy-duty graphical drawing (just region layout and dimension tracking), you can skip libraries entirely. Use CSS Grid or Flexbox to create responsive regions, then use getBoundingClientRect() in JS to get their dimensions:

// Assuming you have a div with class "region"
const region = document.querySelector('.region');
const bounds = region.getBoundingClientRect();
console.log('Region width:', bounds.width);
console.log('Region height:', bounds.height);

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