javascript的事件监听器将下拉列表转换为输入按钮
event listener of javascript converting drop down list to input button
下面是JavaScript，它根据所选单选按钮创建多边形或直线。
我想转换我的代码，这样我就可以使用简单的输入按钮来执行函数，而不是单选按钮。我必须为两个按钮分别编写事件侦听器吗？
如果是，我将如何在HTML中调用它们？或者一个事件监听器会做得很好吗？届时将如何处理这些事件？
function onPageLoaded()
{
canvas.addEventListener("click", onCanvasClick, false);
setInterval(updateScreen, 100);
}
function onCanvasClick(e)
{
var x = e.clientX-canvas.offsetLeft;
var y = e.clientY-canvas.offsetTop;
switch (byId('shapeType').value)
{
case 'poly': polyClick(x,y);
break;
case 'line': lineClick(x,y);
break;
}
}
而不是这个
<select id='shapeType'>
<option value="poly" selected>Polygon</option>
<option value="line">Line</option>
</select>
我想用这个
<input type="button" value="Add polygon">
<input type="button" value="Add line">
对于完整的代码，你可以看到这个线程的解决方案http://www.codeproject.com/Answers/693319/unable-to-draw-more-then-1-shape-on-html5-canvas#answer1
您可以这样尝试。。向按钮添加一个公共类，然后编写相同的代码。
HTML
<input type="button" value="Add polygon" class="draw" data-type="poly">
<input type="button" value="Add line" class="draw" data-type="line">
JS
function onPageLoaded() {
var buttons = document.getElementsByClassName('draw');
for(var i=0;i < buttons.length; i++) {
buttons[i].addEventListener("click", onButtonClick, false);
}
setInterval(updateScreen, 100);
}
function onCanvasClick(e) {
var x = e.clientX-canvas.offsetLeft;
var y = e.clientY-canvas.offsetTop;
switch (this.getAttribute("data-type")) {
case 'poly': polyClick(x,y);
break;
case 'line': lineClick(x,y);
break;
}
}
我正在添加整个代码。您必须添加一个可变的图形类型。在onButtonClick中，你设置它。然后你根据图形类型绘制：
<!DOCTYPE html>
<head>
<script>
var END_CLICK_RADIUS = 5;
//the max number of points of your poygon
var MAX_POINTS = 8;
var mouseX = 0;
var mouseY = 0;
var isStarted = false;
var points = null;
var polygons = null;
var lines = null;
var canvas = null;
var ctx = null;
var graphtype="polygon";
window.addEventListener('load', onPageLoaded, false);
function onPageLoaded() {
}
function byId(e){return document.getElementById(e);}
//object representing a point
function Point(x, y)
{
this.x = x;
this.y = y;
}
// object representing a polygon
function Polygon(points, color)
{
this.points = points;
this.color = color;
}
// object representing a single line segment
function LineSegment(point1, point2, color)
{
this.p1 = point1;
this.p2 = point2;
this.color = color;
}
function onPageLoaded()
{
var buttons = document.getElementsByClassName('draw');
for(var i=0;i < buttons.length; i++) {
buttons[i].addEventListener("click", onButtonClick, false);
}
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
setColor( byId('color').value );
canvas.addEventListener("click", onCanvasClick, false);
canvas.addEventListener("mousemove", onCanvasMouseMove, false);
polygons = new Array();
lines = new Array();
//refresh time
setInterval(updateScreen, 100);
}
function onButtonClick(e){
switch (this.getAttribute("data-type")) {
case 'poly': graphtype="polygon";
break;
case 'line': graphtype="line";
break;
}
}
function onCanvasMouseMove(e)
{
mouseX = e.clientX - canvas.offsetLeft;
mouseY = e.clientY - canvas.offsetTop;
}
function addPolygon()
{
polygons[polygons.length] = new Polygon(points, byId('color').value);
alert(polygons.length + " polygons completed");
}
function addLine()
{
lines[lines.length] = new LineSegment(points[0], points[1], byId('color').value);
}
function onCanvasClick(e)
{
var x = e.clientX-canvas.offsetLeft;
var y = e.clientY-canvas.offsetTop;
switch ( graphtype)
{
case 'polygon': polyClick(x,y);
break;
case 'line': lineClick(x,y);
break;
}
}
function lineClick(x,y)
{
if (isStarted)
{
points[points.length] = new Point(x,y);
addLine();
reset();
isStarted = false;
// points = new Array();
}
else
{
isStarted = true;
points = new Array();
points[points.length] = new Point(x,y);
}
}
function polyClick(x, y)
{
if(isStarted)
{
//drawing the next line, and closing the polygon if needed
if(Math.abs(x - points[0].x) < END_CLICK_RADIUS && Math.abs(y - points[0].y) < END_CLICK_RADIUS)
{
isStarted = false;
addPolygon();
reset();
}
else
{
points[points.length] = new Point(x, y);
if(points.length >= MAX_POINTS)
{
addPolygon();
reset();
}
}
}
else if(points == null)
{
//opening the polygon
points = new Array();
points[0] = new Point(x, y);
isStarted = true;
}
}
//changes the color of the draw
function setColor(color)
{
ctx.strokeStyle = color;
}
//resets the application
function reset()
{
isStarted = false;
points = null;
}
// called whenever the screen needs updating
function updateScreen()
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
switch ( graphtype)
{
case 'polygon':
drawIncompletePolygon();
break;
case 'line':
drawIncompleteLine();
break;
}
var i, n;
n = polygons.length;
for (i=0; i<n; i++)
drawPolygon(polygons[i]);
n = lines.length;
for (i=0; i<n; i++)
drawLineSegment(lines[i]);
}
// draws an arbitrary polygon. Takes a Polygon object as the input
function drawPolygon(polyToDraw)
{
setColor(polyToDraw.color);
var i, n = polyToDraw.points.length;
ctx.beginPath();
ctx.moveTo(polyToDraw.points[0].x, polyToDraw.points[0].y);
for (i=1; i<n; i++)
ctx.lineTo(polyToDraw.points[i].x, polyToDraw.points[i].y);
ctx.lineTo(polyToDraw.points[0].x, polyToDraw.points[0].y);
ctx.closePath();
ctx.stroke();
}
function drawLineSegment(lineSegToDraw)
{
setColor(lineSegToDraw.color);
ctx.beginPath();
ctx.moveTo(lineSegToDraw.p1.x, lineSegToDraw.p1.y);
ctx.lineTo(lineSegToDraw.p2.x, lineSegToDraw.p2.y);
ctx.closePath();
ctx.stroke();
}
function drawIncompleteLine()
{
if (isStarted)
{
setColor(byId('color').value);
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
ctx.lineTo(mouseX, mouseY);
ctx.closePath();
ctx.stroke();
}
}
function onCanvasClick(e) {
var x = e.clientX-canvas.offsetLeft;
var y = e.clientY-canvas.offsetTop;
switch ( graphtype){
case 'polygon': polyClick(x,y);
break;
case 'line': lineClick(x,y);
break;
}
}
//draws the current **in-progress** shape
function drawIncompletePolygon()
{
setColor(byId('color').value);
ctx.beginPath();
if(points != null && points.length > 0)
{
ctx.moveTo(points[0].x, points[0].y);
for(i = 1 ; i < points.length ; i++)
{
ctx.lineTo(points[i].x, points[i].y);
}
if(isStarted)
{
ctx.lineTo(mouseX, mouseY);
}
else
{
ctx.lineTo(points[0].x, points[0].y);
}
}
ctx.stroke();
ctx.closePath();
}
</script>
<style>
body
{
margin: 0;
}
#board
{
margin: 0 auto;
width: 500px;
}
#myCanvas
{
border: 3px dotted #000;
}
</style>
</head>
<body>
<div id="board">
<canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>
<br />
Couleur : <select id="color" onchange="setColor(this.value);">
<option value="red" selected="selected">Red</option>
<option value="blue">Blue</option>
<option value="green">green</option>
<option value="black">black</option>
<option value="yellow">yellow</option>
</select>
<input type="button" value="Add polygon" class="draw" data-type="poly">
<input type="button" value="Add line" class="draw" data-type="line">
</div>
</body>
</html>
相关文章：
- 使用JAVASCRIPT转换货币.可以't通过我的函数设置转换后的输入文本字段的值
- 使用jquery将输入字段转换为文本
- 根据浏览器位置，用JavaScript将输入的日期转换为UTC
- 将一个html表转换为json对象并将其发送到php页面，该表有一个输入字段
- 将 html 输入转换为正确的编码
- 使用用户输入动态转换数据(Highcharts，JavaScript，Django）
- MySQL INSERT 命令正在将输入转换为不同的格式/值
- 输入占位符文本转换CSS样式
- javascript的事件监听器将下拉列表转换为输入按钮
- 如何通过JavaScript将二进制(输入）转换为字符串(输出）
- 将输入转换为循环中的文本
- 获取html中的文本输入并转换为javascript
- 使用用户输入javascript进行权重转换
- 无法将输入(ImageButton）转换为jQuery
- JavaScript 转换用户输入
- 在 React 的 html 输入中在美分和美元之间进行转换
- AngularJS-转换输入值并使视图反映所做的更改
- 用javascript解析类似谷歌的单位转换输入
- angularjs-如何转换输入元素，因为列表元素
- 使用 javascript 转换输入日期时间
