3

Я хочу написать текстовый редактор cheatsheet, курсор которого показывает результат команд перемещения от одного отмеченного символа к другому символу в тексте, возможно, в другой строке.

Текст будет иметь код фиксированной ширины, поэтому холст можно рассматривать как сетку N x N. В идеале, мне нужен инструмент, который может нарисовать стрелку с одной позиции в этой сетке на другую позицию.

Существуют разные соображения, такие как, могу ли я сделать лучше, чем растрированное изображение текста + наложенная стрелка, или я мог бы сделать что-то фантастическое, как визуализировать текст как текст, а затем наложить прозрачное изображение SVG с помощью векторизованной стрелки.

1

2 ответа 2

3

Поскольку это сетка, как вы говорите, вы должны знать координаты x, y для начала и конца линии. Они переводят x1, y1 на x2, y2 атрибуты на строку svg ниже:

html {
  font-family: monospace;
  background-color: #efefef;
}

.text {
  background-color: #ffffff;
  position: relative;
}

.text svg {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 13px;
  line-height: 120%;
}

.text,
.text svg {
  width: 400px;
  height: 150px;
}
<p class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non-provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.


  <svg viewBox="0 0 400 150">
  
    <defs>
      <pattern id="smallGrid" y="12" width="7.8" height="15" patternUnits="userSpaceOnUse">
       <path d="M 15 0 L 0 0 0 15" fill="none" stroke="rgba(50,0,255,0.3)" stroke-width="0.5"/>
      </pattern>
      <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
      </marker>
    </defs>
    
    <rect width="400" height="150" fill="url(#smallGrid)" />
    <line x1="39" y1="12" x2="156" y2="68" stroke="#000" stroke-width="1" marker-end="url(#arrow)" />

  </svg>
</p>

Ответ @Ted

3

Вариант с нанесением стрелок на растровое изображение.

Этот вариант даёт возможность нанести стрелки на растровое изображения без использования растрового редактора.

Так как при этом используется SVG, то становится возможным анимировать эти стрелки.

#1 Статичные стрелки

Для стрелки используется линия c координатами начала x1 y1 и конца x2 y2 и маркер на её конце marker-end

Изменяя координаты линии можно задавать любое направление, маркер автоматически будет расположен на конце линии - orient="auto"

Изображение добавлено в SVG с помощью команды

<image xlink:href="https://i.stack.imgur.com/BOhFs.jpg" width="1920" height="1440" />

что позволяет сохранить взаимное расположение растрового изображения и векторных стрелок. Вёрстка никогда не сломается при изменении размера дисплея.

html {
      font-family: monospace;
      background-color: #efefef;
    }
  .container {
  width:75%;
  height:75%;
  }  

   
    .txt {
      font-size: 50px;
      font-weight:700;
    } 

      .image svg {
      width: 1920px;
      height: 1440px;
    }
<div class="container">
 <svg viewBox="0 0 1920 1440">
      
        <defs>
         
          <marker id="arrow" markerWidth="20" markerHeight="20" refX="0" refY="12" orient="auto" markerUnits="strokeWidth">
            <path d="M0,0 20,10 0,20 2,10 z" fill="red" />
          </marker>
        </defs>
		<text class="txt"  x="1000" y="50" text-anchor="middle" > Что нового в этой модели Nissan </text>
    <image xlink:href="https://i.stack.imgur.com/BOhFs.jpg" width="1920" height="1440" />
          <line x1="900" y1="100" x2="154" y2="833" stroke="#000" stroke-width="1" marker-end="url(#arrow)" />
		<line x1="900" y1="100" x2="400" y2="833" stroke="#000" stroke-width="1" marker-end="url(#arrow)"  /> 
		<line x1="900" y1="100" x2="1000" y2="633" stroke="#000" stroke-width="1" marker-end="url(#arrow)"  /> 
		<line x1="900" y1="100" x2="1750" y2="633" stroke="#000" stroke-width="1" marker-end="url(#arrow)"  /> 
	
      </svg>
    </div>  

#2 Динамические стрелки

Анимация стрелок осуществляется изменением координат конца линии X2,Y2

<animate id="anX2" attributeName="x2" values="900;400" begin=anY1.end dur="2s" fill="freeze" />
 <animate id="anY2" attributeName="y2" values="100;833" begin=anY1.end dur="2s" fill="freeze" />

Последовательность анимации стрелок задается в атрибуте begin=anY1.end" Данная запись означает - начало анимации после окончания анимации с id=anY1

html {
      font-family: monospace;
      background-color: #efefef;
    }

    .container {
      width:75%;
      height:75%;
      }  

    .txt {
      font-size: 50px;
      font-weight:700;
    } 

      .image svg {
      width: 1920px;
      height: 1440px;
    }
<div class="container">
<svg viewBox="0 0 1920 1440">
      
        <defs>
         
          <marker id="arrow"
		   markerWidth="20" 
		   markerHeight="20" 
		   refX="0"
		   refY="12"
		   orient="auto" 
		   markerUnits="strokeWidth">
            <path d="M0,0 20,10 0,20 2,10 z" fill="red" />
          </marker>
        </defs>
		<text class="txt"  x="1000" y="50" text-anchor="middle" > Что нового в этой модели Nissan </text>
    <image xlink:href="https://i.stack.imgur.com/BOhFs.jpg" width="1920" height="1440" />
          <line x1="900" y1="100" x2="900" y2="100" stroke="#000" stroke-width="1" marker-end="url(#arrow)" >
		  <animate id="anX1" 
		   attributeName="x2" 
		   values="900;154" 
		   begin="0s;anY4.end" 
		   dur="1.5s" 
		   fill="freeze" />
		    <animate id="anY1"
 			 attributeName="y2" 
			 values="100;833" 
			 begin="0s;anY4.end" 
			 dur="1.5s" 
			 fill="freeze" />
		  </line>
		  
		<line x1="900" y1="100" x2="900" y2="100" stroke="#000" stroke-width="1"        marker-end="url(#arrow)"  > 
		 <animate id="anX2" 
		  attributeName="x2" 
		  values="900;400" 
		  begin="anY1.end" 
		  dur="1.5s" 
		  fill="freeze" />
		  
		  <animate id="anY2" 
		   attributeName="y2" 
		   values="100;833" 
		   begin="anY1.end" 
		   dur="1.5s" 
		   fill="freeze" />
		  </line>
		
		<line x1="900" y1="100" x2="900" y2="100" stroke="#000" stroke-width="1" marker-end="url(#arrow)"  > 
          <animate id="anX3" 
     		  attributeName="x2" 
			  values="900;1000" 
			  begin="anY2.end"
			  dur="1.5s" 
			  fill="freeze" />
		  <animate id="anY3" 
		    attributeName="y2" 
			values="100;633" 
			begin="anY2.end" 
			dur="1.5s" 
			fill="freeze" /> 
		  </line>
		
		
	 	<line x1="900" y1="100" x2="900" y2="100" stroke="#000" stroke-width="1" marker-end="url(#arrow)"  >
          <animate id="anX4" attributeName="x2" values="900;1750" begin="anY3.end" dur="1.5s" fill="freeze" />
		  <animate id="anY4" attributeName="y2" values="100;633" begin="anY3.end" dur="1.5s" fill="freeze" />
		  </line> 
		
      </svg> 
   </div>

begin="0s;anY4.end" - команда на зацикливание анимации. Запись означает - запуск первой анимации рисования первой линии с нулевой секунды, повторный запуск анимации начнется после окончания анимации рисования последней линии.

Ответ @Alexandr_TT

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.