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

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

如何獲得CSS 3D轉(zhuǎn)換畫布的畫布相對(duì)鼠標(biāo)位置？

如何獲得CSS 3D轉(zhuǎn)換畫布的畫布相對(duì)鼠標(biāo)位置？

只是為了好玩，我試圖在3D變換的畫布上繪制。我寫了一些代碼，它的工作原理const m4 = twgl.m4;[...document.querySelectorAll('canvas')].forEach((canvas) => {  const ctx = canvas.getContext('2d');  let count = 0;  canvas.addEventListener('mousemove', (e) => {    const pos = getElementRelativeMousePosition(e, canvas);    ctx.fillStyle = hsl((count++ % 10) / 10, 1, 0.5);    ctx.fillRect(pos.x - 1, pos.y - 1, 3, 3);  });});function getElementRelativeMousePosition(e, elem) {  const pos = convertPointFromPageToNode(elem, e.pageX, e.pageY);     return {    x: pos[0],    y: pos[1],  };}function hsl(h, s, l) {  return `hsl(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%)`;}function convertPointFromPageToNode(elem, pageX, pageY) {  const mat = m4.inverse(getTransformationMatrix(elem));  return m4.transformPoint(mat, [pageX, pageY, 0]);};function getTransformationMatrix(elem) {  let matrix = m4.identity();  let currentElem = elem;  while (currentElem !== undefined &&          currentElem !== currentElem.ownerDocument.documentElement) {    const style = window.getComputedStyle(currentElem);    const localMatrix = parseMatrix(style.transform);    matrix = m4.multiply(localMatrix, matrix);    currentElem = currentElem.parentElement;  }  const w = elem.offsetWidth;  const h = elem.offsetHeight;  let i = 4;  let left = +Infinity;  let top = +Infinity;  for (let i = 0; i < 4; ++i) {    const p = m4.transformPoint(matrix, [w * (i & 1), h * ((i & 2) >> 1), 0]);    left = Math.min(p[0], left);    top = Math.min(p[1], top);  }  const rect = elem.getBoundingClientRect()  document.querySelector('p').textContent =    `${w}x${h}`;  matrix =  m4.multiply(m4.translation([     window.pageXOffset + rect.left - left,      window.pageYOffset + rect.top - top,     0]), matrix);  return matrix;}上面的代碼有效。將鼠標(biāo)移到兩個(gè)黃色畫布元素上，您會(huì)看到它正確繪制了。但是，一旦我添加了一些3D變換，它就會(huì)失敗。將“＃c6”的CSS更改為    #c6 {      background: pink;      transform: rotate(45deg) rotateX(45deg);  /* changed */      display: inline-block;    }現(xiàn)在當(dāng)我在右邊的黃色畫布上繪制時(shí)，一切都關(guān)閉了。有什么想法我做錯(cuò)了嗎？
查看完整描述

2 回答

?
慕哥6287543

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

igh ...尚不是肯定的答案，但顯然event.offsetX，event.offsetY即使根據(jù)MDN，它們?nèi)圆皇菢?biāo)準(zhǔn)值。


測(cè)試它似乎可以在Chrome和Firefox中使用。Safari在某些測(cè)試中處于關(guān)閉狀態(tài)。同樣不幸的是，在觸摸事件上不存在offsetX和offsetY。它們確實(shí)存在于指針事件上，但自2019/05起Safari不支持指針事件


[...document.querySelectorAll('canvas')].forEach((canvas) => {

  const ctx = canvas.getContext('2d');

  let count = 0;


  canvas.addEventListener('mousemove', (e) => {

    const pos = {

      x: e.offsetX * ctx.canvas.width / ctx.canvas.clientWidth,

      y: e.offsetY * ctx.canvas.height / ctx.canvas.clientHeight,

    };

    ctx.fillStyle = hsl((count++ % 10) / 10, 1, 0.5);

    ctx.fillRect(pos.x - 1, pos.y - 1, 3, 3);

  });

});


function hsl(h, s, l) {

  return `hsl(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%)`;

}

canvas { 

  display: block;

  background: yellow;

  transform: scale(0.75);

}

#c1 {

  margin: 20px;

  background: red;

  transform: translateX(-50px);

  display: inline-block;

}

#c2 {

  margin: 20px;

  background: green;

  transform: rotate(45deg);

  display: inline-block;

}

#c3 {

  margin: 20px;

  background: blue;

  display: inline-block;

}


#c4 {

  position: absolute;

  top: 0;

  background: cyan;

  transform: translateX(-250px) rotate(55deg);

  display: inline-block;

}

#c5 {

  background: magenta;

  transform: translate(50px);

  display: inline-block;

}

#c6 {

  background: pink;

  transform: rotate(45deg) rotateX(45deg);  /* changed */

  display: inline-block;

}

<p>

foo

</p>

<div id="c1">

  <div id="c2">

    <div id="c3">

      <canvas></canvas>

    </div>

  </div>

</div>

<div id="c4">

  <div id="c5">

    <div id="c6">

      <canvas></canvas>

    </div>

  </div>

</div>

不幸的是，我們?nèi)匀挥幸粋€(gè)問(wèn)題，有時(shí)我們想要事件外部的畫布相對(duì)位置。在下面的示例中，即使指針不移動(dòng)，我們也希望將其保持在鼠標(biāo)指針下方。


[...document.querySelectorAll('canvas')].forEach((canvas) => {

  const ctx = canvas.getContext('2d');

  ctx.canvas.width  = ctx.canvas.clientWidth;

  ctx.canvas.height = ctx.canvas.clientHeight;

  let count = 0;


  function draw(e, radius = 1) {

    const pos = {

      x: e.offsetX * ctx.canvas.width / ctx.canvas.clientWidth,

      y: e.offsetY * ctx.canvas.height / ctx.canvas.clientHeight,

    };

    document.querySelector('#debug').textContent = count;

    ctx.beginPath();

    ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);

    ctx.fillStyle = hsl((count++ % 100) / 100, 1, 0.5);

    ctx.fill();

  }


  function preventDefault(e) {

    e.preventDefault();

  }


  if (window.PointerEvent) {

    canvas.addEventListener('pointermove', (e) => {

      draw(e, Math.max(Math.max(e.width, e.height) / 2, 1));

    });

    canvas.addEventListener('touchstart', preventDefault, {passive: false});

    canvas.addEventListener('touchmove', preventDefault, {passive: false});

  } else {

    canvas.addEventListener('mousemove', draw);

    canvas.addEventListener('mousedown', preventDefault);

  }

});


function hsl(h, s, l) {

  return `hsl(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%)`;

}

.scene {

  width: 200px;

  height: 200px;

  perspective: 600px;

}


.cube {

  width: 100%;

  height: 100%;

  position: relative;

  transform-style: preserve-3d;

  animation-duration: 16s;

  animation-name: rotate;

  animation-iteration-count: infinite;

  animation-timing-function: linear;

}


@keyframes rotate {

  from { transform: translateZ(-100px) rotateX(  0deg) rotateY(  0deg); }

  to   { transform: translateZ(-100px) rotateX(360deg) rotateY(720deg); }

}


.cube__face {

  position: absolute;

  width: 200px;

  height: 200px;

  display: block;

}


.cube__face--front  { background: rgba(255, 0, 0, 0.2); transform: rotateY(  0deg) translateZ(100px); }

.cube__face--right  { background: rgba(0, 255, 0, 0.2); transform: rotateY( 90deg) translateZ(100px); }

.cube__face--back   { background: rgba(0, 0, 255, 0.2); transform: rotateY(180deg) translateZ(100px); }

.cube__face--left   { background: rgba(255, 255, 0, 0.2); transform: rotateY(-90deg) translateZ(100px); }

.cube__face--top    { background: rgba(0, 255, 255, 0.2); transform: rotateX( 90deg) translateZ(100px); }

.cube__face--bottom { background: rgba(255, 0, 255, 0.2); transform: rotateX(-90deg) translateZ(100px); }

<div class="scene">

  <div class="cube">

    <canvas class="cube__face cube__face--front"></canvas>

    <canvas class="cube__face cube__face--back"></canvas>

    <canvas class="cube__face cube__face--right"></canvas>

    <canvas class="cube__face cube__face--left"></canvas>

    <canvas class="cube__face cube__face--top"></canvas>

    <canvas class="cube__face cube__face--bottom"></canvas>

  </div>

</div>

<pre id="debug"></pre>


查看完整回答
反對(duì) 回復(fù) 2021-04-29
  • 2 回答
  • 0 關(guān)注
  • 181 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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