SVG용 JavaScript 텍스트 편집기

그림 1. 선택, 복사, 붙여넣기를 지원하는 SVG 텍스트 편집기. PC와 모바일에서 작동합니다.

Demo | GitHub

이 문서에서는 텍스트 편집기를 만드는 방법을 설명합니다. 소스 코드가 첨부되어 있습니다.

SVG의 여러 줄 텍스트

SVG에는 줄 바꿈 문자가 없습니다. 여러 줄 텍스트의 경우 SVG는 <tspan> 를 사용합니다.


그림 2. 여러 줄 텍스트, 세 번째 줄이 비어 있음

<text x="0" y="0">
    <tspan x="0" y="0">Line 1</tspan>
    <tspan x="0" y="20px">Line 2</tspan>
    <!-- Line 3 is empty
    <tspan x="0" y="40px"></tspan> -->
    <tspan x="0" y="60px">Line 4</tspan>
</text>

목록 1. SVG의 여러 줄 텍스트. 세 번째 줄은 비어 있습니다. 줄 높이는 20픽셀입니다.
<tspan> 요소의 위치는 <text> 의 위쪽 가장자리를 기준으로 합니다. 'y' 속성 값을 계산해야 합니다.

'y' 속성 계산을 피할 수 있습니다. 목록 2는 동일한 결과를 제공합니다. 'dy' 속성은 고정된 값으로 사용됩니다. 'dy'는 이전 요소에 상대적인 위치를 나타냅니다.

<text x="0" y="0">
    <tspan x="0" dy="0">Line 1</tspan>
    <tspan x="0" dy="20px">Line 2</tspan>
    <tspan x="0" dy="20px" visibility="hidden">.</tspan>
    <tspan x="0" dy="20px">Line 4</tspan>
</text>

목록 2. SVG의 여러 줄 텍스트. 세 번째 줄은 비어 있습니다. 줄 높이는 20픽셀입니다. 들여쓰기는 이전 요소를 기준으로 설정됩니다.

JavaScript로 여러 줄 마크업 만들기

아래 함수는 고정된 'dy' 속성으로 마크업을 렌더링합니다. 마크업은 Listing 2와 같이 획득된다.

/**
 * create multiline tspan markup
 * @param {string} str
 * @param {number} lineHeight
 * @returns {string}
 */
function svgStrToTspan(str, lineHeight) {
    return str.split('\n').map((t, i) => {
        return `<tspan
            x="0"
            dy="${i === 0 ? '0' : `${lineHeight}px`}"
            ${t.length === 0 ? 'visibility="hidden"' : ''}>

                ${t.length === 0
                    ? '.'
                    : escapeHtml(t).replaceAll(' ', '&nbsp;')}

            </tspan>`;
    }).join('');
}

목록 3. 여러 줄 마크업을 만드는 함수

그림 1에서 줄을 추가하면 텍스트가 위로 이동합니다. 따라서 텍스트는 항상 원의 중심에 있습니다. Listing 4는 이것이 구현되는 방법을 보여줍니다.

/**
 * @param {SVGTextElement} textEl target text element
 * @param {string} str
 * @param {{lineHeight:number, verticalMiddle?:number}} param
 * @returns {void}
 */
export function svgTextDraw(textEl, str, param) {
    textEl.innerHTML = svgStrToTspan(str, param.lineHeight);
    if (param.verticalMiddle != null) {
        textEl.y.baseVal[0].value =
            param.verticalMiddle - textEl.getBBox().height / 2;
    }
}

목록 4. 이 함수는 SVG에 텍스트를 삽입합니다. verticalMiddle 을 지정하면 텍스트가 수직으로 중앙에 배치됩니다.

텍스트 에디터

편집기는 모든 표준 기능을 지원해야 합니다.

텍스트 탐색, 선택, 삽입, 복사;

자동 수정, 맞춤법 검사;

PC와 모바일에서 작업

표준 기능의 경우 표준<textarea>이 있습니다.

편집기의 알고리즘:

투명<textarea>이 텍스트 위에 배치됩니다.<textarea> 글꼴도 투명합니다.

입력 시 목록 4의 svgTextDraw가 호출됩니다.

<textarea>의 크기와 위치가 다시 계산됩니다.

알고리즘은 textareaCreate 함수에서 구현됩니다. a separate file on GitHub의 기능 코드 .

편집기는 모든 요소<text>에 연결할 수 있습니다.

const textEditor = textareaCreate(
    // {SVGTextElement}
    textEl,
    // text params
    { lineHeight: 20, verticalMiddle: 10 },
    // init value
    'init text',
    // onchange
    val => {...},
    // onblur
    val => {...});
…
// delete textarea
textEditor.remove();

Listing 5. <text>용 텍스트 편집기 만들기

dgrm.net에 대한 다른 기사

프로젝트를 지원하는 방법

순서도 편집기 사용을 시작하십시오Dgrm.net.
네가 생각하는 것을 말해줘. 댓글, 비공개 메시지, GitHub .
나는 모든 것을 읽고 제안 목록을 보관합니다.

친구에게 알려주세요.

GitHub에 별표를 주세요.