canvas 우클릭시 나타나는 에러
에러 내용
×
NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node
해당 코드
const [context, setContext] = useState(false);
// 마우스 클릭 이벤트
canvas.on("mouse:down", (e) => {
if (e.button === 2) {
canvas.remove(e.target);
}
if (e.button === 3) {
// context menu
return setContext(true);
}
});
return (
<CanvasSection>
{context ? <ContextMenu /> : ""}
<>
해결
아래로 위치 옮기니깐 해결됨
return (
<CanvasSection>
<>
<canvas id="canvas" />
<MenuSection>
<li onClick={() => setMenuNum(0)}>
<img src={caseIcon} alt="caseIcon" />
<div>케이스</div>
</li>
<li onClick={() => setMenuNum(1)}>
<img src={shapeIcon} alt="shapeIcon" />
<div>도형</div>
</li>
<li onClick={() => setMenuNum(2)}>
<img src={textIcon} alt="textIcon" />
<div>텍스트</div>
</li>
<li onClick={() => setMenuNum(3)}>
<img src={imageIcon} alt="imageIcon" />
<div>이미지</div>
</li>
<li onClick={() => setMenuNum(4)}>
<img src={palleteIcon} alt="palleteIcon" />
<div>색상</div>
</li>
<li onClick={() => setMenuNum(5)}>
<img src={strokeIcon} alt="strokeIcon" />
<div>테두리</div>
</li>
<button onClick={saveHandler}>저장</button>
</MenuSection>
</>
{context && (
<ContextMenu
point={point}
canvas={canvas}
contextMenuHandler={contextMenuHandler}
/>
)}
```
Author And Source
이 문제에 관하여(canvas 우클릭시 나타나는 에러), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kusdsuna/canvas-우클릭시-나타나는-에러저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)