繁中
English繁中

使用原生畫布進行拖放和縮放

作者: /

關於無限畫布的教程，幫助開發人員理解和實現無限畫布的概念和功能。
Infinite Canvas是一個允許用戶以非線性方式自由組織內容的界面，支持縮放等功能、移動、分組和修改樣式等基本圖形的直觀編輯。"

當然！我給你剪一份三部分解釋 xiaoiver/無限畫布-教程 項目的核心內容讓您更清楚地了解其設計理念：

1. 項目目標：創建基本的「無限畫布」

  • 目標是提供畫布拖曳（平移）、變焦，當您拖動或縮放時，屏幕上的元素（例如點、矩形）會正確遵循轉換。
  • 專注於視圖是被操縱的，而不是元素本身。換句話說，圖形坐標是固定的，用戶在「移動相機」的同時觀看畫布。"

2. 主要功能點解釋

功能 實現思路 細節
拖動畫布 聽 mousedown, mousemove, mouseup 事件，計算滑鼠移動量，並更新翻譯值（offsetX, offsetY） 使用變量記錄當前翻譯狀態
縮放畫布 聽 輪 滾動事件，根據滾動輪方向放大或縮小，調整 規模 縮放 請注意，縮放時，以滑鼠指針為中心調整偏差
繪製圖形 每次 draw（） 當調用函數時，基於當前 offsetX, offsetY, 規模 在畫布上重新繪製元素 在繪製前使用畫布 ctx. setChange（） 應用變換
維持轉變狀態 使用 ctx.save（） 和 ctx.restore（） 確保每次繪製時Canvas狀態正確的方法 避免變換和疊加錯誤

3. 核心代碼的邏輯梳理

標準渲染過程如下：

public void run（）{
 ctx.save（）; //保存當前轉換狀態
 ctx. setShape（scale，0，scale，offsetX，offsetY）; //應用平移和縮放
 ctx.clearRect（-offsetX/scale，-offsetY/scale，canvas. root/scale，canvas.height/scale）; //清除畫布
 //畫一個固定在世界坐標中的圖形
 drawAllElements（）;
 ctx.restore（）; //恢復轉換狀態
}
  • 規模 控制縮放大小。
  • offsetX 和 offsetY 控制畫布的翻譯。
  • 每個圖形在繪製形狀之前，請應用縮放和平移變換。

互動時，例如：

  • 拖動滑鼠 - 更新 抵消X/抵消Y
  • 滑鼠滾輪 - 更新 規模
  • 然後再打回去 draw（） 重繪

附加細節

  • 畫布初始化需要根據設備像素比（DPR）進行調整 canvas.width 和 canvas.height確保高分屏幕下清晰的畫面質量。
  • 縮放時，為了實現滑鼠指針對於中心，需要使用一些簡單的坐標轉換公式。

總結

該項目可以被視為：

  • 極簡主義白板引擎
  • 交互式2D編輯器的基礎知識
  • 理解Canvas轉換矩陣的練習

它只是基本版本，但如果您想擴展，例如添加：

  • 元素選擇、拖動、刪除
  • 連接、分組
  • 多人協作和同步
  • 保存和恢復畫布內容

您可以慢慢構建複雜的應用程式，例如Figma / Miro / Excalidraw！

GitHub：https://github.com/xiaoiver/infinite-canvas-tutorial

輸油管：

返回頂端