728x90
๋ฐ์ํ
SMALL
WebGL์ ๊ธฐ๋ณธ ์ขํ๊ณ
- ์ผ์ชฝ ์: (-1, 1)
- ์ค๋ฅธ์ชฝ ์๋: (1, -1)
SVG์ ๊ธฐ๋ณธ ์ขํ๊ณ
SVG์ ๊ธฐ๋ณธ ์ขํ๊ณ๋ ํฝ์ ์ขํ๋ฅผ ์ฌ์ฉํฉ๋๋ค:
- ์ผ์ชฝ ์: (0, 0)
- ์ค๋ฅธ์ชฝ ์๋: (width, height)
1๋จ๊ณ. WebGL ์ขํ๊ณ -> ํฝ์ ์ขํ๊ณ ๋ณํ:
WebGL์ (-1, 1) -> SVG์ (0, 0)์ผ๋ก ๋งคํ๋๊ณ , (1, -1) -> SVG์ (width, height)์ผ๋ก ๋งคํ๋ฉ๋๋ค.
function webglToPixel(x, y, canvas) {
const width = canvas.width;
const height = canvas.height;
return {
x: (x + 1) * 0.5 * width,
y: (1 - y) * 0.5 * height
};
}
2๋จ๊ณ. relative์ absolute ์ง์
(1) ๊ฒน์น๋ ค๋ canvas์ svg๋ฅผ ๊ฐ์ธ๊ณ ์๋ div ์์ญ(๋ถ๋ชจ, ex_container)์ relative๋ฅผ ์ฃผ๊ณ
- relative : ์์ ์๊ธฐ ์์ ์ ๊ธฐ์ค์ผ๋ก ๋ฐฐ์น
(2) canvas์ svg์๋ absolute๋ฅผ ์ค๋ค.
- absolute : ๋ถ๋ชจ ์์๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ฐฐ์น
<style>
#container {
position: relative;
width: 800px;
height: 600px;
}
canvas, svg {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
3๋จ๊ณ. canvas์ svg์ ๊ฐ์ px์ width & height๋ฅผ ์ค๋ค.
<body>
<div id="container">
<canvas id="webglCanvas" width="800" height="600"></canvas>
<svg id="svgOverlay" width="800" height="600">
<!-- D3.js ๊ทธ๋ํฝ ์์ -->
<circle cx="400" cy="300" r="50" fill="blue"></circle>
</svg>
</div>
</body>
728x90
๋ฐ์ํ
LIST
'๐ป DEV > ์ฐ๊ตฌ๋ชฉ๋ก' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [WebGL - regl] (2) regl ์์ ์ GLSL ์ฝ๋ ํด์ (0) | 2024.08.08 |
|---|---|
| [WebGL - regl] (1) regl ์ด๋? (0) | 2024.08.08 |
| [Figma] We can't open that file ์๋ฌ ํด๊ฒฐ (WebGL) (0) | 2023.12.13 |
| [Git] SSH ํค ์์ฑํ๋ ๋ฐฉ๋ฒ & SSH ํค ์ฐพ๋ ๋ฐฉ๋ฒ (0) | 2023.11.15 |
| [Tomcat] Tomcat ํฌํธ ๋ฒํธ ์ฌ๋ฌ ๊ฐ ์ฌ์ฉํ๊ธฐ, ์ถ๊ฐํ๊ธฐ(windows) (0) | 2023.07.19 |
๋๊ธ