个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
25
4
我正在使用 KinectJS 根据鼠标移动绘制线条。当用户按住鼠标按钮时，我希望它成为线条的“起点”，当用户释放时，它将成为线条的“终点”，但是当他们按住鼠标时我想要能够在我的鼠标移动时动态重绘线条。这可能吗？
最佳答案
是的，这是可能的。
基本上，您必须在 onMouseMove 事件期间重绘图层。您需要一个标志来控制线路何时移动。
当脚本初始化时，这个标志应该是假的。
在 onMouseDown 时，行开始应接收当前鼠标坐标并将标志设置为 true。
在 onMouseMouve 中，如果标志为真，您应该更新行尾以接收当前鼠标坐标。
在 onMouseUp 时，该标志应设置为 false。
请看下面的例子:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"></script>
<script>
window.onload = function() {
layer = new Kinetic.Layer();
stage = new Kinetic.Stage({
container: "container",
width: 320,
height: 320
});
background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: "white"
});
line = new Kinetic.Line({
points: [0, 0, 50, 50],
stroke: "red"
});
layer.add(background);
layer.add(line);
stage.add(layer);
moving = false;
stage.on("mousedown", function(){
if (moving){
moving = false;layer.draw();
} else {
var mousePos = stage.getMousePosition();
//start point and end point are the same
line.getPoints()[0].x = mousePos.x;
line.getPoints()[0].y = mousePos.y;
line.getPoints()[1].x = mousePos.x;
line.getPoints()[1].y = mousePos.y;
moving = true;
layer.drawScene();
}
});
stage.on("mousemove", function(){
if (moving) {
var mousePos = stage.getMousePosition();
var x = mousePos.x;
var y = mousePos.y;
line.getPoints()[1].x = mousePos.x;
line.getPoints()[1].y = mousePos.y;
moving = true;
layer.drawScene();
}
});
stage.on("mouseup", function(){
moving = false;
});
};
</script>
</head>
<body>
<div id="container" ></div>
</body>
</html>
关于javascript - KineticJS - 用鼠标画线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12311535/
25
4
0
我对java Graphics不熟悉，我想在3个按钮上画一条线。我找到了一些绘制线条的方法，但没有一个将其绘制在按钮顶部。 这是我的 GUI 类 public class GUI extends JF
我正在尝试画线。 int main(int argc, char *argv[]) { QApplication a(argc, argv); MainWindow w; w.
我目前正在尝试在 BabylonJS 中跟踪对象的路径。 为此，我想在现有位置和以前的位置之间画一条线。 我能得到的最接近的是一个立方体。 var plane = BABYLON.Mesh.Creat
我正在尝试绘制一棵递归树，但我已经卡在了开头。一段时间以来，我一直在尝试解决这个问题，但似乎无法解决。 我正在使用 StdDraw 库。这就是我想做的: 我已经画好了树干(黑线)。但我也需要画红线。
在我之前的问题中 For Loop Functions in Python ,我在放置包含为刽子手游戏划线的命令的函数时遇到了麻烦。它并没有完全划清界线，我首先怀疑这是 for 循环或函数的问题。现在
我有一个自定义布局，可以根据触摸输入画一条线。我让它画了线，但是当用户触摸屏幕时，线消失了，它画了一条新线。我想要它做的是画一条新线并将上一条线留在那里。这是我的代码: import andr
我想使用触摸监听器在屏幕上画一条线，但是当我再次尝试画线时，它会删除上一条线。我正在使用这段代码:- 我无法找到问题的解决方案。 public class Drawer extends View
我已经阅读了一堆涉及 XNA(以及它的各种版本)的教程，但我仍然对绘制原语感到有些困惑。一切似乎真的很复杂。 有人可以使用代码向我展示在屏幕上绘制一两行的最简单的 XNA 实现吗？也许有一个简短的解释
我是 Objective C 的初学者，我试图用 Paint 风格制作一个程序，我正在用平移手势画一条线。我可以做出手势，但问题是我无法在我用鼠标经过的地方画图，每次它重新加载我之前删除的那个点时。帮
如何使用 SVG 绘制连接 2 个图像的线？。例如我想画一条线连接 $1 和 $2(假设 $1 和 $2 是图像): $1 $2 是否需要 Javascript？ 谢谢! 最佳答案 您可以轻松
我在创建此代码时遇到问题。我遇到的问题是，当我单击以停止绘制线条时，它有 50% 的机会第一次工作但是如果你只做直线，它似乎只能正常工作，但我希望它从任何方向工作，我不是 100% 确定为什么它不工作
我想在我的 TextView 中的数字/字母之间绘制垂直线。所以它看起来应该类似于 A|B|C|D 不使用 | 字符，而是使用 drawLine()。 我正在尝试使用 TextView 的宽度来做到这
我刚刚开始使用 AWT 来使用 GUI。框架正在打开，但线路未显示。 import java.awt.*; import java.awt.event.*; class A extends Frame
我可以使用 CGContext 绘制线条。如何使用 UIView 绘制具有相同坐标的线？以后想移动线条，需要用到UIView。 func DrawLine() { UIGraphicsBegi
请在此处查看我的代码 http://jsbin.com/ijoxa3/edit var drawHorizondalLine = function(x1,y1,x2,y2, color) {
IE9 Canvas 现在支持虚线吗？目前我正在做一些与以下非常相似的事情: var CP = window.CanvasRenderingContext2D && CanvasRenderingCo
我有一个程序，我正试图在一个小部件上画一条线。这是我的代码: 标题: #include #include class DrawingWidget : public QWidget{ Q_O
基于此question ，我写了这个 jsfiddle ，我想补充两点。问题可能是点位于六边形内。 这是 HTML:
我正在尝试从一个对象到目标对象画一条线。我设法做到了这一点，但是线条是从中心绘制的 我想做的是在目标上绘制从平面边缘到平面边缘的线 在此图像中，白线是当前绘制的连接，红线是我希望绘制线的方式 现在线条
如何添加线条，就像我在 Paint 中使用 ILNumerics 绘制一样？我的场景正在使用该代码构建: ilPanel1.Scene = new ILScene() { new ILP
我是一名优秀的程序员,十分优秀！