我是一名计算机编码新手，正在学习 HTML、CSS、Javascript 和 Raphael 的入门类(class)。
我正在做一项作业，我应该使用一个按钮来放大一个矩形(rec1)，而我对这部分感到困惑(我正在使用 HTML 和 Raphael 来完成这项作业)。
为了提供一些背景信息，我使用 Raphael 制作了一个戴着帽子的雪人。当我单击按钮时，帽子 (rec1) 应该变大。
我已复制并粘贴以下作业说明:
Add a element below the SVG (as examples from previous exercises have had). When the button is clicked, the hat (or at least some part of it) should get bigger.
To do this, you'll need to save the rectangle in a variable when it is created
hat = paper.rect(...) And then when the button is clicked, use the .scale() function to scale it horizontally and/or vertically:
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="http://cmpt165.csil.sfu.ca/js/jquery-3.2.1.js"></script>
<script src="http://cmpt165.csil.sfu.ca/js/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'
})
}最佳答案
您需要向按钮添加一个事件监听器(单击事件)以及一个放大帽子的函数。请不要使用 jQuery 并忽略任何告诉您的答案 - 纯 JavaScript 就可以。
首先查看 Mozilla 开发人员 JavaScript 引用 - 这是学习编写 JavaScript 的“正确方法”的绝佳资源
关于javascript - 按钮 - 使用按钮放大矩形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47086669/