Кнопка - Использование кнопки для увеличения прямоугольника

1

Я новичок компьютерный кодер, и я беру вводный класс по HTML, CSS, Javascript и Raphael.

Я выполняю задание, где я должен использовать кнопку, чтобы сделать прямоугольник большим (rec1), и я в тупике в этой части (я использую HTML и Raphael для этого задания).

Чтобы дать некоторый контекст, я использую Рафаэля, чтобы сделать снеговика в шляпе. Когда я нажимаю кнопку, шляпа (rec1) должна увеличиваться.

Я скопировал и вставил инструкции для назначения ниже:

Добавьте элемент под SVG (как примеры из предыдущих упражнений). Когда нажимается кнопка, шляпа (или, по крайней мере, ее часть) должна увеличиваться.

Для этого вам нужно сохранить прямоугольник в переменной при ее создании

hat = paper.rect(...) И затем, когда нажата кнопка, используйте функцию.scale(), чтобы масштабировать ее по горизонтали и/или по вертикали:

hat.scale(1.1, 1.0)

Вот мой HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="/style.css" />

<script src="/jquery-3.2.1.js"></script>
<script src="/raphael-2.1.4.js"></script>
<script src="/my-code.js"></script>

	<title>Raphael Test</title>
</head>

<body>
	<h1>Raphael Snowman</h1>
		<div id="container" align='center'></div>
		<button id="hat"></button>


 
</body>

</html>

И вот моя кодировка javascript.

length = 20;

increaseLength = function(){
	length += 10;
}



setup = function() {
  paper = Raphael('container', 300, 300)
  rec1 = paper.rect(40,10,length,15)
  rec1.attr({
	'fill': 'black',
	'stroke': '#000',
	'stroke-width': '2'
  })
  rec2 = paper.rect(30,25,40,10)
  rec2.attr({
	'fill': 'black',
	'stroke': '#000',
	'stroke-width': '2'
  })
  circ1 = paper.circle(50, 60, 24)
  circ1.attr({
    'stroke': '#000',
    'stroke-width': '2'
  })
  circ2 = paper.circle(50, 90, 28)
  circ2.attr({
    'stroke': '#000',
    'stroke-width': '2'
  })
  circ3 = paper.circle(50, 130, 32)
  circ3.attr({
    'stroke': '#000',
    'stroke-width': '2'
  })
}
  • 0
    Куда вы добавляете какие-либо события с помощью кнопки? Я не уверен, каковы ваши ожидания. Если бы вы могли предоставить рабочий фрагмент того, что у вас есть, это было бы здорово. Если это поможет, вы можете напрямую связываться с библиотеками через https, чтобы фрагменты работали в стеке потока https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael.js
  • 0
    Спасибо за ответ NewToJS. Я, наверное, не очень хорошо объяснил себя. Опять же, я новичок в кодировании, и JavaScript был довольно сложным для меня. Вот ссылка на мое задание, надеюсь, он даст вам лучшее представление о том, что мне нужно: coursys.sfu.ca/2017fa-cmpt-165-c0/pages/Exercise8
Теги:
button
raphael

3 ответа

0

Я скопировал код Ian, и я смог расширить свою шляпу. В первый раз я пропустил некоторые кодировки, но позже исправил работу. Спасибо за помощь!

Теперь я понимаю, что мне больше нужно узнать о JavaScript и Raphael, поэтому я пытаюсь пересмотреть свое учебное пособие.

Поделиться
0

Вы можете добавить обработчик клика к кнопке с помощью...

<button id="hat" onclick="hatBigger()">Click me</button>

И глобальная функция, с которой он может звонить...

window.hatBigger = function() {
  hat1.transform('s2')
  hat2.transform('s2')
}

Мы можем просто использовать переменную, чтобы сохранить это (это вне области функции)

var hat1; // global scope

затем позже в настройке

hat1 = rec1;

jsfiddle

Поделиться
0

Вам нужно будет добавить прослушиватель событий к кнопке (событие click), а также функцию масштабирования шляпы. Пожалуйста, не используйте jQuery и игнорируйте любой ответ, который говорит вам - простой JavaScript в порядке.

Посмотрите на ссылку JavaScript разработчика Mozilla для запуска - это отличный ресурс для изучения "правильного пути" для написания JavaScript

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню