AmalkiranCM Ответов: 1

Как я могу добавить редактируемое текстовое поле на холст, когда мы нажимаем на кнопку с помощью angular5


Как я могу добавить редактируемое текстовое поле на холст, когда мы нажимаем на кнопку, используя только "angular5"

Что я уже пробовал:

Я создал кнопку, используя Bootstrap и я хочу, чтобы кода onclick кнопки "Добавить" в редактируемом текстовом поле, чтобы быть загружены в наш ID определенном положении
onclick fn должен быть только в разделе "использование Angular5"

<название>
Страница Начальной Загрузки
.row {
		position: relative;
		}
		
	body {
			background-size: cover;
			min-width: 100%;
		}
		
	.left {
		border: 2px dashed black;
		height: 100vh;
		width: 100%;
		}

	#myCanvas {
		background:url("https://s10.aconvert.com/convert/p3r68-cdx67/bpvcr-e5c8y.svg");
		background-repeat: no-repeat;
		background-size: inherit;
		background-size: 900px 368px;
	}
	.right {
		border: 1px dotted red;
		height: 100vh;
		width: 100%;
		position: relative;
		}

	.add_text {
	    position: absolute;
		right: 10px;
		top: 10px;
		padding-left: 30px;
		padding-right: 30px;
		
		}
	.page-header {
		background-color:#31ac31;
		min-height: 80;
		max-height: 100;
		}

	img {
		height: 50;
		}
		
	.square {
			height: 75px;
			width: 75px;
		}


<br>


	<div>


	<br>
	 
		 <h>CM Edits
	

	<div class="row"> 
			<div class="col-md-1 col-sm-1 col-lg-1"> </div>
			
			 <div class="col-md-7 col-sm-7 col-lg-7">
			 
			 </div>
			  <div class="col-md-1 col-sm-1 col-lg-1"> </div>
			 
			<div class="col-md-3 col-sm-3 col-lg-3">
				Add Text
			</div>
	
	</div>
			
	<br><br><br>
		<div class="row"> 
			<div class="col-md-1 col-sm-1 col-lg-1"> </div>
				   <div class="col-md-7 col-sm-7 col-lg-7 left">
							   <canvas id="myCanvas" width="829" height="500" style="padding-left: inherit">
									 
									
							   
				   </div>
				   
					 <div class="col-md-1 col-sm-1 col-lg-1"> </div>
					 
				   <div class="col-md-3 col-sm-3 col-lg-3 right">
						  right pannel 
						

					

						 
				   </div>
		 </div>
	 </div>

1 Ответов

Рейтинг:
2

Kornfeld Eliyahu Peter

По стандартам canvas не должно быть input элементы с type="text"(даже вы можете найти браузеры, поддерживающие его)...
Вы можете создать div элемент, который будет переполнять canvas и на самом деле держите input.. но, вероятно, лучше переосмыслить свой дизайн...
<canvas>: графический элемент Canvas - HTML: язык разметки гипертекста | MDN[^]


AmalkiranCM

Можете ли вы объяснить простым кодом, что я хочу, чтобы svg на холсте был загружен с помощью angular5

Kornfeld Eliyahu Peter

Если вы используете SVG, вам, вероятно, не нужен холст... Подумайте об этом...
https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html

AmalkiranCM

Но моя задача - спроектировать это в angular5 ..Смотрите же вот так :
https://www.deluxe.com/products/design-x/your-design-business-card-2-x-3-12-rectangle-horizontal/43562/?optid=88