第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

將 Wrapper+Canvas+Div 匹配到圖像的大小

將 Wrapper+Canvas+Div 匹配到圖像的大小

達(dá)令說 2022-06-05 10:34:53
我在 Google Apps 腳本中使用 heatmap.js,我正在嘗試調(diào)整熱圖畫布的大?。ㄎ铱梢栽谄渲袑?shí)際繪制點(diǎn))以適合圖像。如何更改 javascript 或樣式以使其正常工作?代碼:https ://jsfiddle.net/nateomardavis/51h2guL9/有wrapper黑色邊框。熱圖div有藍(lán)色邊框。有canvas一個(gè)紅色邊框。它應(yīng)該如何工作:我應(yīng)該能夠在圖像上的任何位置標(biāo)記熱圖。包裝器、熱圖 div 和畫布都應(yīng)根據(jù)圖像的大小調(diào)整大小。目前如何工作:我只能在藍(lán)/黑邊框內(nèi)標(biāo)記熱圖。我的 javascript 調(diào)整畫布大小以適應(yīng)圖像,但不調(diào)整熱圖的邊界。我嘗試過的內(nèi)容:您可以在小提琴中看到我是如何嘗試更改 javascript 調(diào)整大小的(第 88-90 行)。我還考慮過使用圖像作為div 的大小,但大小background-image不是heatmap正確,我希望能夠?qū)釄D和圖像保存為一層(用于打印/保存)。我還嘗試更改圖像的大?。ǖ?101 行),但任何超過 55% 的東西都會(huì)切斷圖像。下面的屏幕截圖僅供參考,但完整的工作代碼在小提琴中。我把它全部放在 HTML 下,因?yàn)檫@就是它在 Google Apps 腳本中的工作方式。
查看完整描述

1 回答

?
夢里花落0921

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超6個(gè)贊

經(jīng)過大量的修補(bǔ),我能夠弄清楚:https ://jsfiddle.net/nateomardavis/p1kwrhmv

  1. 我用CSSimg給了它一個(gè)。background-image

  2. 然后我將熱圖圖層設(shè)置為relative,并將圖像圖層設(shè)置為absolute使用解決方案HERE

  3. 最后,我使用HERE概述的方法設(shè)置圖像層 css 。

.heatmap {

  background-size: contain;

  background-repeat: no-repeat;

  width: 100%;

  height: 300%; /*if the image is bigger than screen, this is needed */

  position: relative;

}


.backgroundIMG {

  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Soccer_Field_Transparant.svg/1200px-Soccer_Field_Transparant.svg.png');

  background-size: contain;

  background-repeat: no-repeat;

  position: absolute;

  width: 100%;

  height: 0;

  padding-top: 151.33%;

}


查看完整回答
反對 回復(fù) 2022-06-05
  • 1 回答
  • 0 關(guān)注
  • 102 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)