亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 html 畫布上縮放鼠標繪圖元素

在 html 畫布上縮放鼠標繪圖元素

飲歌長嘯 2021-09-04 17:53:09
有沒有辦法在畫布上縮放繪圖元素?我正在創建一個應用程序,然后用戶可以在畫布上放置點,但是當我嘗試調整瀏覽器窗口的大小時,所有元素都消失了。我最初的嘗試是計算調整大小前后的屏幕差異。得到百分比后,我只是將比例尺放在畫布上,并將第一次繪制時保存的坐標放置在畫布上,但仍然不起作用,如果點出現在畫布上,則是在畫布上沒有縮放的同一個地方。有人可以給我一點思路嗎?private calculateCanvasScreenDifference(previousSize, guestScreen) {    return ((controlScreen - currentSize) * 100) / controlScreen;}let difWidthPercent = Math.abs(this.calculateCanvasScreenDifference(canvasPreviousWidth, canvasWidth) * 0.01);let difHeightPercent = Math.abs(this.calculateCanvasScreenDifference(canvasPreviousHeight, canvasHeight) * 0.01);                        let scaleX = ((Math.abs(difWidthPercent) <= 1) ? 1.00 - difWidthPercent : difWidthPercent - 1.00);let scaleY = ((Math.abs(difHeightPercent) <= 1) ? 1.00 - difHeightPercent : difHeightPercent - 1.00);this.cx.scale(Number(scaleX), Number(scaleY));......// then start recreating the drawing that was previous saved on an array of object(x, y values)this.cx.beginPath();this.cx.arc(coord.x, coord.y, 7, 0, Math.PI * 2, true);this.cx.stroke();
查看完整描述

1 回答

?
胡子哥哥

TA貢獻1825條經驗 獲得超6個贊

跟蹤畫布寬度并從比例因子 1 開始。


let originalWidth = canvas.width;


let scale = 1;

在調整大小時計算新的比例因子。并更新跟蹤的畫布大小。


let scale = newWidth / originalWidth;

originalWidth = newWidth;

始終對所有繪圖使用比例因子。例如


context.arc(coord.x * scale, coord.y * scale, radius, 0, Math.PI*2, false);

注意:此方法假設原始畫布和新畫布大小成比例。如果不是,那么您將需要跟蹤寬度和高度,并計算單獨的 x 和 y 比例因子。


查看完整回答
反對 回復 2021-09-04
  • 1 回答
  • 0 關注
  • 167 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號