我的代码的目标:
每当用户单击画布时,在HTML画布上绘制一个小矩形.矩形应该有一个小数字,表示用户制作的矩形数.
用户应该能够使用直线连接任意两个矩形.(最好只需按下鼠标左键,将鼠标从第一个矩形移到第二个矩形)
方法和我的尝试
正如你在这个jsFiddle中看到的那样,我已经能够很好地实现上面的第一部分.单击画布时,会在其中生成一个带有数字的矩形.但我对第二部分真的很无能为力.
如何让用户连接任何两个制作的矩形？我想只有在有一个矩形的情况下才能建立连接(所以我需要存储已经制作的每个矩形的坐标,这是可以的,因为我可以使用一个数组).基本上,我只是想检查mousedown是在一个地方而鼠标在另一个地方.我如何获得这两个不同的坐标(mousedown和其他鼠标之一),并在它们之间画一条线？我给了上面的小提琴,但仍然是我的jquery:
$(function () {
var x, y;
var globalCounter = 0;
$('#mycanvas').on("click", function (event) {
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
x -= mycanvas.offsetLeft;
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
y -= mycanvas.offsetLeft;
// alert("x:"+x+"y: "+y);
drawRectangle(x, y);
});
function drawRectangle(x, y) {
var acanvas = document.getElementById("mycanvas");
var context = acanvas.getContext("2d");
context.strokeRect(x, y, 25, 25);
globalCounter++;
writeNo(x, y, globalCounter);
}
function writeNo(x, y, n) {
var acanvas = document.getElementById("mycanvas"); …我刚刚学习了bxslider并通过阅读文档制作了我的第一个幻灯片.但我无法在图像上看到左右箭头,以便下一个图像可以通过单击显示,如下例所示:此链接
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>New seven Wonders of the world</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<ul class="bxslider">
<li><img src="pic2.jpg" title="Great Wall of China, China"/></li>
<li><img src="pic3.jpg" title="Petra, Jordan" /></li>
<li><img src="pic4.jpg" title="Colosseum, Rome, Italy" /></li>
<li><img src="pic5.jpg" title="Chichen Itza, Mexico" /></li>
<li><img src="pic6.jpg" title="Machu Pichu, Peru" /></li>
<li><img src="pic7.jpg" title="Taj Mahal, India" /></li>
<li><img src="pic8.jpg" title="Christ the redeemer, Brazil" /></li>
<li><img src="pic1.jpg" title="Giza Necropolis, …我正在使用Google的Material Design Lite Web框架构建一个简单的登录页面,并使用React.js来处理我的UI逻辑.
我遇到了一个非常奇怪的问题:当我在没有React的情况下渲染它时,带有浮动标签的输入文本框完全正常,但在通过React类渲染时不起作用.
我的代码看起来像:
var Login = React.createClass({
render: function(){
return(
<div className="mdl-grid">
<div className="mdl-cell mdl-cell--2-col"></div>
<div className="mdl-cell mdl-cell--8-col">
<form>
<div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input className="mdl-textfield__input" type="text" id="sample3" />
<label className="mdl-textfield__label" htmlFor="sample3">Text...</label>
</div>
</form>
</div>
</div>
);
}
});
我已经确定我代替class用className和for用htmlFor.但它不起作用,预期的标签,从不"浮动"意味着它保持在文本框内.
当我复制相同的代码并将其粘贴到HTML中时,它可以正常工作.(Ofcourse我改变className和htmlFor).
可能是什么问题？有帮助吗？这让我疯了.