Question

我是一名新手计算机程序员，我正在上HTML，CSS，Javascript和Raphael的入门课程。

我正在进行一项任务，我应该使用一个按钮来制作一个更大的矩形（rec1），我在这部分难倒（我正在使用HTML和Raphael进行此任务）。

为了给出一些背景知识，我正在用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="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'
  })
}

Answer 1

您需要向按钮添加事件侦听器（单击事件）以及用于扩展帽子的功能。请不要使用jQuery并忽略任何告诉你的答案 - 简单的JavaScript就好了。

请参阅Mozilla Developer JavaScript参考文章 - 它是学习“正确方法”的绝佳资源。写JavaScript

Answer 2

您可以使用...添加点击处理程序

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

它可以调用的全局函数......

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

我们可以简单地使用变量来保存它（在函数范围之外）

var hat1; // global scope

然后在设置

中

hat1 = rec1;

jsfiddle

Answer 3

我复制了你的代码Ian，我能够扩展我的帽子。我第一次错过了一些编码，但后来我纠正了这项工作。谢谢你的帮助！

我现在意识到我需要学习更多关于JavaScript和Raphael的内容，所以我正在尝试查看我的学习指南。

按钮 - 使用按钮使矩形更大

3 个答案: