Javascript 布尔值“切换”
Javascript boolean "toggle"
我有一个函数,它查看光标(x,y),看看它是否落在几个矩形(a<x<b, c<y<d
)中的一个。但是,我需要根据光标是否落入特定矩形来设置布尔值,并且仅在光标落入其他矩形时才重置它。换句话说,
-
如果光标位于矩形 X 内,则为 A 真
-
如果光标位于矩形 1、2、3 或 4 内,则 A 为假
-
如果 A 位于 Y 或 Z 以外的任何位置,则保留其以前的值
离开第一个矩形,无论我是否访问其他 2 个矩形,布尔值都会返回 false。我尝试将布尔值设为全局,但这无济于事。
法典;
var r
var s
var l
var inCenter = false
function makeRects(a,b)
{
r = a-b
s = (a/2) - (b/2)
l = (a/2) + (b/2)
lSide = new Array(4)
lSide[0] = 0
lSide[1] = 0
lSide[2] = a
lSide[3] = b
tSide = new Array(4)
tSide[0] = 0
tSide[1] = 0
tSide[2] = b
tSide[3] = a
rSide = new Array(4)
rSide[0] = r
rSide[1] = 0
rSide[2] = b
rSide[3] = b
bSide = new Array(4)
bSide[0] = 0
bSide[1] = r
bSide[2] = b
bSide[3] = b
aSquare = new Array(4)
aSquare[0] = 0
aSquare[1] = 0
aSquare[2] = s
aSquare[3] = s
bSquare = new Array(4)
bSquare[0] = l
bSquare[1] = 0
bSquare[2] = b
bSquare[3] = s
cSquare = new Array(4)
cSquare[0] = 0
cSquare[1] = l
cSquare[2] = s
cSquare[3] = r
dSquare = new Array(4)
dSquare[0] = l
dSquare[1] = l
dSquare[2] = r
dSquare[3] = r
lCenter = new Array(4)
lCenter[0] = 0
lCenter[1] = s
lCenter[2] = b
lCenter[3] = l
tCenter = new Array(4)
tCenter[0] = s
tCenter[1] = 0
tCenter[2] = l
tCenter[3] = b
rCenter = new Array(4)
rCenter[0] = r
rCenter[1] = s
rCenter[2] = a
rCenter[3] = l
bCenter = new Array(4)
bCenter[0] = s
bCenter[1] = r
bCenter[2] = l
bCenter[3] = a
mCenter = new Array(4)
mCenter[0] = s
mCenter[1] = s
mCenter[2] = l
mCenter[3] = l
}
function cursor(a,b)
{
var inaSquare = false
var inbSquare = false
var incSquare = false
var indSquare = false
var inCenter = false
if ((a>aSquare[0] && a<aSquare[2])&&(b>aSquare[1] && b<aSquare[3]))
{
inaSquare = true
post("aSquare");
post();
}
if ((a>bSquare[0] && a<bSquare[2])&&(b>bSquare[1] && b<bSquare[3]))
{
inbSquare = true
post("bSquare");
post();
}
if ((a>cSquare[0] && a<cSquare[2])&&(b>cSquare[1] && b<cSquare[3]))
{
inbSquare = true
post("cSquare");
post();
}
if ((a>dSquare[0] && a<dSquare[2])&&(b>dSquare[1] && b<dSquare[3]))
{
indSquare = true
post("dSquare");
post();
}
if (inaSquare||inbSquare||incSquare||indSquare)
{
inCenter = false
}
if ((a>mCenter[0] && a<mCenter[2])&&(b>mCenter[1] && b<mCenter[3]))
{
inCenter = true
inaSquare = false
inbSquare = false
incSquare = false
indSquare = false
}
if (((inCenter && a>s) && a<l) && b<lCenter[3])
{
outlet (1, 1)
}
else if (((inCenter && a>s) && a<l) && b>rCenter[0])
{
outlet (1, 2)
}
else if (((inCenter && b>s) && b<l) && a<tCenter[3])
{
outlet (1, 3)
}
else if (((inCenter && b>s) && b<l) && b>bCenter[1])
{
outlet (1, 4)
}
else
{
outlet (1, 0)
}
post("inCenter");
post(inCenter);
post();
post("inaSquare");
post(inaSquare);
post();
post("inbSquare");
post(inbSquare);
post();
post("incSquare");
post(incSquare);
post();
post("indSquare");
post(indSquare);
post();
}
很抱歉,这不是一个真正的答案,但我已经编辑了您的代码以使用循环和数组/映射。这样,您也许可以获得更多帮助。希望您也能从中学到一些东西:)
因此,您的代码也可能如下所示:
var r
var s
var l
function makeRects(a,b)
{
r = a-b
s = (a/2) - (b/2)
l = (a/2) + (b/2)
// Place all arrays inside maps, so that we can loop through them later.
side = {
l: [0, 0, a, b],
t: [0, 0, b, a],
r: [r, 0, b, b],
b: [0, r, b, b],
}
square = {
a: [0, 0, s, s],
b: [l, 0, b, s],
c: [0, l, s, r],
d: [l, l, r, r]
}
center = {
l: [0, s, b, l],
t: [s, 0, l, b],
r: [r, s, a, l],
b: [s, r, l, a],
m: [s, s, l, l]
}
}
function cursor(a,b)
{
var inside = {
a: false,
b: false,
c: false,
d: false,
center: true
}
// This loop will run through every key of the map, and x will hold the key
for (var x in square) {
if ((a>square[a][x] && a<square[x][2])&&(b>square[x][1] && b<square[x][3]))
{
inside[x] = true;
// Instead of checking if the cursor is inside the center, we assume it
// is by default, and if it is found inside a square, inside['center'] is set to false
inside['center'] = false;
post(x + "Square");
post();
}
}
// Not sure what you want to do here...
if (((inside['center'] && a>s) && a<l) && b<center['l'][3])
{
outlet (1, 1)
}
else if (((inside['center'] && a>s) && a<l) && b>center['r'][0])
{
outlet (1, 2)
}
else if (((inside['center'] && b>s) && b<l) && a<center['t'][3])
{
outlet (1, 3)
}
else if (((inside['center'] && b>s) && b<l) && b>center['b'][1])
{
outlet (1, 4)
}
else
{
outlet (1, 0)
}
}
好的,
我根据我认为您要完成的内容修改了原始演示,但它仍然不是很清楚,因此您需要更好地描述您要完成的内容,而不是如何根据矩形坐标命中测试切换布尔值。 您尝试完成的任务可能以更简单的方式完成,而无需诉诸基于坐标的命中测试。
演示:
http://jsfiddle.net/DaveAlger/cVPpU/5/
.html:
<p id="toggle-state">false: center not hit</p>
<p id="mouse-xy"></p>
<canvas id="top" class="box" x="200" y="50" width="100" height="100" c="#933" b="#faa"></canvas>
<canvas id="left" class="box" x="50" y="200" width="100" height="100" c="#993" b="#ffa"></canvas>
<canvas id="right" class="box" x="350" y="200" width="100" height="100" c="#696" b="#dfd"></canvas>
<canvas id="bottom" class="box" x="200" y="350" width="100" height="100" c="#369" b="#adf"></canvas>
<canvas id="center" class="box" x="200" y="200" width="100" height="100" c="#999" b="#ddd"></canvas>
.css:
.box{position: absolute;}
#mouse-xy{float:right;padding:30px;color:#999;font-family:sans-serif;}
.js:
var isCenterHit = false;
var checkCenterHit = true;
// draw canvas rectangles
$('.box').each(function(i) {
//alert(i);
var id = $(this).attr('id')
var w = $(this).width();
var h = $(this).height();
var c = $(this).attr('c');
var x = $(this).attr('x');
var y = $(this).attr('y');
drawRect( document.getElementById( id ).getContext('2d'), w, h, c, id );
$(this).offset({top: y, left: x});
});
function drawRect( ctx, width, height, color, text ) {
ctx.fillStyle = color;
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = '#fff';
ctx.font = '30px sans-serif';
ctx.textBaseline = 'top';
ctx.fillText(text, 0, 0);
}
// listen for mouse over
$(document).mousemove(function(e){
var x = e.pageX;
var y = e.pageY;
var tX = $(e.target).attr('x');
var tY = $(e.target).attr('y');
var tW = $(e.target).width();
var tH = $(e.target).height();
// update mouse location
$('#mouse-xy').html("center hit: " + isCenterHit + " | X: " + x + " Y: " + y);
// rectangle coordinate hit test (this can be done other ways too)
if ( x > tX && x < tX + tW && y > tY && y < tY + tH ) {
// toggle the boolean
if ( checkCenterHit && $(e.target).attr('id') === 'center' ) {
isCenterHit = !isCenterHit;
checkCenterHit = false;
}
if ( isCenterHit ) {
// do this when center hit state is 'on'
$('body').css('background-color',$(e.target).attr('b'));
$('canvas').css('cursor','pointer');
} else {
// do this when center hit state is 'off'
$('body').css('background-color','');
$('canvas').css('cursor','');
}
}
else {
$('body').css('background-color','#ffffff');
checkCenterHit = true;
}
});
可能您的命中测试函数需要有一个名为 doTest
的标志,最初设置为 true,然后在命中中心矩形后设置为 false
然后,一旦点击不同的矩形,您就可以再次将doTest
设置为 True
相关文章:
- 如何从javascript/jquery中的复选框中获取布尔值
- KendoUI网格行过滤器,带有布尔值下拉列表
- php布尔值's小写AND大写和数字布尔值'可以接受
- 使用类属性切换Div值
- select中布尔值的Angularjs ng值不起作用
- 由于布尔值的变化,Django视图中的字符串格式不正确
- MeteorJs Alded autoform,如何从布尔值复选框中获得所需值
- 如何切换布尔值
- 切换子文档的布尔值
- 切换 标记在使用 ng-hide/show 和布尔值时失败
- Javascript 布尔值“切换”
- 根据布尔值切换 D3 形状
- 在 JavaScript 中切换布尔值
- 在$rootScope和控制器之间切换布尔值的最佳方式
- 基于增量切换布尔值
- 如何将纸张切换按钮绑定到聚合物中的布尔值
- 我希望我的Ember.js条件在切换布尔值时加载不同的模板
- 基于布尔值在ember-js中切换元素可见性
- Mongoose findByIdAndUpdate 方法,用于切换和更新数据库中的布尔值
- 角度 2:根据条件切换布尔值