用JavaScript在画布上画一个矩形-定义矩形
Drawing a Rectangle in Canvas in JavaScript - Defining Rectangle Starting Pont
这是我的难题。我使用了一些来自在线源代码的代码,使用画布绘制了一个矩形,并一直在调整它以适应我的需要。最初的代码工作得很好,但它显然是从窗口的左上角开始;这是我从代码中了解到的。因为我的页面要求它相对于画布位置,而不是窗口,这对我来说是一个问题。当单击矩形开始时,实际矩形开始在光标下方绘制一段距离;然而,再往下和向右,画布从(0,0)开始。如何使它将画布视为用于定义起点的窗口?
JavaScript: function getarea() {
var wid = document.getElementById('wid').value;
var hgt = document.getElementById('hgt').value;
var area = (wid*hgt)
var perim = (+wid + +hgt + +wid + +hgt)
window.document.getElementById('area').innerHTML = area;
window.document.getElementById('perim').innerHTML = perim;
}
var rect;
var canvas;
var context;
var dragging;
function Point(x, y) {
this.x = x;
this.y = y;
}
function Size(width, height) {
this.width = width;
this.height = height;
}
function Rectangle(start, size) {
this.start = start;
this.size = size;
}
function init() {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", startDragging, false);
canvas.addEventListener("mouseup", stopDragging, false);
canvas.addEventListener("mousemove", moved, false);
var start = new Point(0, 0);
var size = new Size(0, 0);
rect = new Rectangle(start, size);
}
function startDragging(event) {
clearRect(rect);
dragging = true;
// initialize start point
var box=canvas.getBoundingClientRect();
var offsetX=box.left;
var offsetY=box.top;
var mouseX = parseInt(event.clientX-offsetX);
var mouseY = parseInt(event.clientY-offsetY);
rect.start.x = mouseX;
rect.start.y = mouseY;
// initialize size
rect.size.width = 0;
rect.size.height = 0;
}
function stopDragging(event) {
dragging = false;
}
function moved(event) {
if(!dragging) return;
var box=canvas.getBoundingClientRect();
var offsetX=box.left;
var offsetY=box.top;
var mouseX = parseInt(event.clientX-offsetX);
var mouseY = parseInt(event.clientY-offsetY);
clearRect(rect);
rect.size.width = event.pageX - rect.start.x;
rect.size.height = event.pageY - rect.start.y;
drawRect(rect);
}
function clearRect(rect) {
context.clearRect(rect.start.x, rect.start.y, rect.size.width, rect.size.height);
}
function drawRect(rect) {
context.fillRect(rect.start.x, rect.start.y, rect.size.width, rect.size.height);
}
HTML(通常与JavaScript问题无关,但我将其包括在内,因为HTML中定义的空间量与问题有关。我怀疑它是否重要,但以防万一。
<html>
<head>
<script src="week5js.js"></script>
<link rel="stylesheet"href="assignment5.css"/>
<link href="assignment5.css" rel="stylesheet" type="text/css">
</script>
</head>
<header>
<center>
Week 6: Unit 6 - Assignment 5
</center>
</header>
<body onload="init()">
<form id="areaform">
<label for="width">Width:</label>
<input id="wid" name="width" type="number">
 
 
<label for="height">Height:</label>
<input id="hgt" name="height" type="number">
<br></br>
<label for="area1">Area:</label>
<output id="area"></output>
<br></br>
<label for="perimeter1">Perimeter:</label>
<output id="perim"></output>
<br></br>
<button onclick="getarea()" type="button">Get Area</button>
</form>
<canvas id="canvas" width="673" height="550"></canvas>
</body>
</html>
CSS canvas {
background-color: #F0F0F0;
border: 1px solid;
}
header{
background-color: yellow;
padding:15px;
margin:30px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size:25px;
background-color:#F0F0F0;
border: 1px solid;
}
body{
max-width:50%;
padding:25px;
margin:20px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size:16x;
border: 2px dotted;
box-shadow: 2px 2px 4px #404040;
}
body img{
max-width:100%;
}
所以,总而言之:我需要能够从一个地方画一个矩形,当我这样做的时候,矩形的起点受到画布与窗口的关系的影响,把所有的东西都弄乱了,把矩形放在了一个不同的点上。我需要矩形从光标处开始
谢谢!
使用相对于画布的鼠标坐标:
var rect;
var canvas;
var context;
var dragging;
function Point(x, y) {
this.x = x;
this.y = y;
}
function Size(width, height) {
this.width = width;
this.height = height;
}
function Rectangle(start, size) {
this.start = start;
this.size = size;
}
function init() {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", startDragging, false);
canvas.addEventListener("mouseup", stopDragging, false);
canvas.addEventListener("mousemove", moved, false);
var start = new Point(0, 0);
var size = new Size(0, 0);
rect = new Rectangle(start, size);
}
function startDragging(event) {
dragging = true;
// initialize start point
var box=canvas.getBoundingClientRect();
var offsetX=box.left;
var offsetY=box.top;
var mouseX = parseInt(event.clientX-offsetX);
var mouseY = parseInt(event.clientY-offsetY);
rect.start.x = mouseX;
rect.start.y = mouseY;
// initialize size
rect.size.width = 0;
rect.size.height = 0;
}
function stopDragging(event) {
dragging = false;
}
function moved(event) {
if(!dragging) return;
var box=canvas.getBoundingClientRect();
var offsetX=box.left;
var offsetY=box.top;
var mouseX = parseInt(event.clientX-offsetX);
var mouseY = parseInt(event.clientY-offsetY);
clearRect(rect);
rect.size.width = mouseX - rect.start.x;
rect.size.height = mouseY - rect.start.y;
drawRect(rect);
}
function clearRect(rect) {
context.clearRect(rect.start.x, rect.start.y, rect.size.width, rect.size.height);
}
function drawRect(rect) {
context.fillRect(rect.start.x, rect.start.y, rect.size.width, rect.size.height);
}
您只需要从位置计算中减去画布的左上角位置。
将这个全局变量添加到你的设置中:
var canvasBox = document.getElementsByTagName('canvas')[0].getBoundingClientRect();
如果你在函数中包装了你的设置,使用窗口。而把canvasBox变成全局的。然后使用此函数计算您的新相对位置。
function getPos(event)
{
return {"x":event.clientX - canvasBox.left,"y":event.clientY-canvasBox.top};
}
像这样使用
var mousePos = getPos(event);
//mousePos.x
//mousePos.y
这是一个扩展的片段处理触摸,它已经从我的库编辑,所以要注意拼写错误!
function init()
{
window.canvas = document.getElementsByTagName('canvas')[0];
window.context = canvas.getContext('2d');
window.canvasBox = canvas.getBoundingClientRect();
canvas.ontouchstart = function(event){start(event);};
canvas.ontouchmove = function(event){update(event);};
canvas.ontouchleave = function(event){end(event);};
canvas.onmousedown = function(event){start(event);};
canvas.onmousemove = function(event){update(event);};
window.addEventListener('mouseup',function(event){end(event);},false);
window.addEventListener('touchend',function(event){end(event);},false);
window.addEventListener('touchcancel',function(event){end(event);},false);
}
function start(event)
{
var position = getPos(event);
}
function update(event)
{
var position = getPos(event);
}
function end(event)
{
var position = getPos(event);
}
function getPos(event)
{
event.preventDefault(); //stops a touch from scrolling the page etc
var pos = {};
if(typeof event.changedTouches !== "undefined") // check for preferred touch data
{ if(event.changedTouches.length !== 0){ // check to see if there are any touches available
pos.x = event.changedTouches[0].clientX;
pos.y = event.changedTouches[0].clientY;
} }
else if(typeof event.touches !== "undefined") // check for other touch data
{ if(event.touches.length !== 0){ // check to see if there are any touches available
pos.x = event.touches[0].clientX;
pos.y = event.touches[0].clientY;
} }
else if(typeof event.clientX !== "undefined") //check for mouse location
{
pos.x = event.clientX;
pos.y = event.clientY;
}
else //set to null as a fallback
{
pos.x = null;
pos.y = null;
}
if(pos.x!==null) // if we have a position, make it in canvas relative space
{
pos.x -= canvasBox.left;
pos.y -= canvasBox.top;
}
return pos;
}
相关文章:
- 如何在JQuery函数中定义一个值,然后调用另一个函数并使用该值
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 要求定义另一个文件中的对象
- 同一项怎么可能在一个实例中未定义,却在另一个实例上定义
- 实现一个建立在google.com之上的自定义搜索引擎
- SuiteScript2.0-包括一个自定义文件
- dataTables-如何自定义分页类型以显示最后一个页码后面的省略号,
- DOM导航-上一个同级未定义
- 如何定义一个模块并使用它来分离js文件
- 可以定义一个中缀函数吗
- 使用drupal中自定义javascript文件中的一个函数
- $.每个jquery循环打印一个“;未定义的“;对于getJSON请求后的每个元素,网格数据都会完美地打印出来
- 遍历SC.ManyArrray以创建要附加到SproutCore中的另一个视图的自定义视图
- 如何运行在一个充满html的字符串中定义的javascript
- Wordpress在播放器旁边播放一个自定义的下载按钮,而不是下载
- jQuery两个不同的选择器,但根据哪一个定义$(this)
- 如何使用RquireJS加载一个定义了全局变量并依赖于另一个第三方库的JS库
- 当我使用的TypeScript定义文件缺少一个定义时,我该怎么办?
- Will Underscore.js defaults()会设置一个定义在原型上的属性
- Jquery添加一个定义值和名称的表单输入