JS圖形編輯器實現(xiàn)標尺功能示例詳解

更新時間：2023年01月16日 10:49:32 作者：前端西瓜哥

這篇文章主要為大家介紹了JS圖形編輯器實現(xiàn)標尺功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

項目地址：

github.com/F-star/suik…

線上體驗：

blog.fstars.wang/app/suika/

標尺指的是畫布上邊和左邊的兩個有刻度的尺子，作用讓用戶知道他正在編輯的視口所在位置范圍。

我們的需求是：間隔特定的長度，繪制一個刻度，并顯示這個刻度在 X 軸或 Y 軸上的位置。

先看最終實現(xiàn)效果：

標尺功能演示

可以看到，視口移動后，標尺上的刻度能正確地改變。此外縮放畫布，標尺的步長會發(fā)生改變，保持一個比較適合的密度。

實現(xiàn)思路

總體實現(xiàn)思路：

確定刻度尺的步長（step）。步長是和畫布縮放比（zoom）相關的，zoom 越大，step 就越??；
計算出需要繪制的所有刻度。分別為從視口從左側(cè)到右側(cè)，從上邊到下邊的范圍；
繪制。繪制上也是有考量的，先繪制背景，然后繪制刻度，最后繪制分界線。

步長選擇

步長會根據(jù) zoom 進行設置，目的是讓視口中的標尺能繪制適宜密度的刻度。

假設我們的步長固定為 50，不跟隨 zoom 改變，在 100% 看起來效果不錯：

但當你縮小時，會變成下面這樣：

密度過大，導致數(shù)字重疊。同樣，放大時則過于稀疏，刻度很難才見到一個，沒能發(fā)揮標尺的效用。

步長怎么計算呢？

理論上步長可以是 50，那么 51 好像也行，3 也行。但更建議使用 5 的倍數(shù)、2 的倍數(shù)、25 的倍數(shù)這些作為步長。

因為沒有什么理論參考，所以我還是選擇參考市面上的設計工具的步長變化設計。

比如 figma，zoom 落在 [100%, 200%) 的步長為 50，[200%, 500%) 則是 10 等等。

我的實現(xiàn)為：

const getStepByZoom = (zoom: number) => {
  // 可用的步長列表
  const steps = [1, 2, 5, 10, 25, 50, 100, 250, 500, 1000, 2500, 5000];
  // 看著 figma 的 step 變化想出的一個奇怪的規(guī)律
  // 然后找出可選步長列表最近的并大于它的 step 作為最終步長
  const step = 50 / zoom;
  for (let i = 0, len = steps.length; i < len; i++) {
    if (steps[i] >= step) return steps[i];
  }
  return steps[0];
};
const step = getStepByZoom(zoom);

計算范圍

這里我講解水平（x 軸）方向的情況。垂直方向同理，就不贅敘了。

首先計算出視口最左側(cè)和最右側(cè)的 x 坐標值。

需要視口坐標轉(zhuǎn)場景坐標的知識，如果你不懂，看我這篇文章：

《圖形編輯器：場景坐標、視口坐標以及它們之間的轉(zhuǎn)換》

let startXInScene = viewport.x + startXInViewport / zoom; // 視口坐標轉(zhuǎn)場景
let endXInScene = viewport.width + startYInViewport / zoom; // 視口坐標轉(zhuǎn)場景

然后找離它們最近的落在刻度上的值。

對此，我實現(xiàn)了一個 getClosestVal 方法。

/**
 * 找出離 value 最近的 segment 的倍數(shù)值
 */
const getClosestVal = (value: number, segment: number) => {
  const n = Math.floor(value / segment);
  const left = segment * n;
  const right = segment * (n + 1);
  return value - left <= right - value ? left : right;
};
startXInScene = getClosestVal(startXInScene, step);
endXInScene = getClosestVal(endXInScene, step);

得到起點和終點，我們可以開始循環(huán)了，從 startXInScene 開始，每次循環(huán)加一個 step，直至達到末尾為止。

ctx.textAlign = 'center'; // 文字水平居中對齊
while (startXInScene <= endXInScene) {
  ctx.strokeStyle = setting.rulerMarkStroke;
  ctx.fillStyle = setting.rulerMarkStroke;
  // 場景轉(zhuǎn)回視口再繪制?？潭染€不能直接在場景中繪制，因為縮放變換會導致線的粗細變化
  const x = (startXInScene - viewport.x) * zoom;
  // 繪制刻度
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x, y + setting.rulerMarkSize);
  ctx.stroke();
  ctx.closePath();
  // 刻度值則用場景坐標的值
  ctx.fillText(String(startXInScene), x, y - 4);
  // +step，指針移動
  startXInScene += step;
}

垂直方向的標尺同理，只是稍微特殊的是刻度值文字需要多做一個 -90 度的旋轉(zhuǎn)。

export const rotateInCanvas = (
  ctx: CanvasRenderingContext2D,
  angle: number,
  cx: number,
  cy: number
) => {
  ctx.translate(cx, cy);
  ctx.rotate(angle);
  ctx.translate(-cx, -cy);
};
rotateInCanvas(ctx, -HALF_PI, x, y);