- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想创建一个移动网页,其中屏幕上出现一个形状,用户只能用他/她的手指在形状的轮廓上描画,然后就会出现一个新的形状。这个library有一些我想要做的很好的例子,只是有更多的形状。我已经找到了几个在触摸设备上在 Canvas 上绘图的好例子 here和here 。我不知道的是如何约束这条线,这样你就只能用一条连续的线在路径上绘制。是否有内置的东西可以让我指定您可以绘制的唯一路径,或者我是否必须手动编写该逻辑?
最佳答案
我们可以将问题分为两部分:
1) 了解用户是否在路径上。
2)了解用户是否走完所有路径部分。
对于 1),我们可以使用 isPointInPath context2D 方法来了解鼠标/触摸点 (x,y) 是否在曲线上。这里的限制是您必须构建一个封闭的曲面,这意味着由 fill() 绘制的曲面,而不是用 stroke() 构建的曲面。因此,如果您正在抚摸粗线,则必须进行一些数学运算,以通过 moveTo+lineTo+fill 构建相应的图形。
对于 2):为您的形状构建“检查点”列表。例如,一个圆可能有 8 个控制点。然后决定用户“激活”检查点的距离。现在该算法的伪代码是:
mouseDown => check()
mouseMove => if mouse is down, check()
checkPointList = [ [ 10, 40, false ] , [ centerX, centerY, isChecked], ... ] ;
checked = 0;
function check() {
clear screen
draw the path
if (mouse down and mouse point on path) {
for ( checkPoint in CheckPointList) {
if (checkPoint near enough of mouse) {
checkPoint[3]=true;
checked++;
}
}
if (checked == checkPointList.length) ==>>> User DID draw all the shape.
} else
clear the flags of the checkPointList;
checked=0;
}
我在这里做了一个 moooost 简单的演示,非常有效。控制点在禁用时显示为红色,在激活时显示为绿色:
http://jsbin.com/wekaxiguwiyo/1/edit?js,output
// boilerplate
var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');
function draw() {
ctx.clearRect(0,0,300,300);
drawShape();
drawCP();
}
// Shape
function drawShape() {
ctx.beginPath();
ctx.moveTo(30,5);
ctx.lineTo(80,5);
ctx.lineTo(80, 300);
ctx.lineTo(30,300);
ctx.closePath();
ctx.lineWidth= 16;
ctx.fillStyle='#000';
ctx.fill();
}
// Control points
var points = [ [50, 50, false], [50,120, false], [50, 190, false],[50,260, false ] ];
var pointsCount = 0;
function drawCP() {
for (var i=0; i<points.length; i++) {
var p = points[i];
ctx.fillStyle=p[2]?'#0F0':'#F00';
ctx.fillRect(p[0]-1, p[1]-1, 2, 2);
}
}
function resetCP() {
for (var i=0; i<points.length; i++) {
points[i][2]=false;
}
pointsCount=0;
}
function testCP(x,y) {
var d=30;
d=sq(d);
for (var i=0; i<points.length; i++) {
if (sq(points[i][0]-x)+sq(points[i][1]-y)<d) {
if (!points[i][2]) pointsCount++;
points[i][2]=true
};
}
}
function sq(x) { return x*x; }
//
draw();
// most simple event handling
addEventListener('mousemove', mouseMove);
var r = cv.getBoundingClientRect();
function mouseMove(e) {
var x = e.pageX-r.left;
var y = e.pageY-r.top;
draw();
ctx.fillStyle='#000';
if (ctx.isPointInPath(x,y)) {
ctx.fillStyle='#F00';
testCP(x,y);
} else {
resetCP();
}
ctx.fillRect(x-3,y-3,6,6);
var pathDrawn = (pointsCount == points.length);
if (pathDrawn) ctx.fillText('Shape drawn!!', 150, 150);
}
关于javascript - 如何限制 <canvas> 上的绘图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25912065/
我正在尝试编写一个函数来制作绘图并将其自动保存到文件中。 我努力用它来动态地做的技巧[plotname=varname & filename=varname &], 并使其与从循环中调用它兼容。 #
有人可以帮助我如何在绘图条形图中添加“下拉”菜单。 我在以下链接 ( https://plot.ly/python/v3/dropdowns/ ) 上找到了一些信息,但我正在努力调整代码,因此下拉选项
我不确切知道如何表达这一点,但我本质上希望根据其他数据之前的列值将数据分组为 Excel 图的系列。例如: size weight apple 3 35 orange 4
我正在为出版物创建图表并希望它们具有相同的字体大小。 当我用多图创建图形时,字体大小会减小,即使我没有更改tiff() 分辨率或pointsize 参数。我根据最终适合的地 block 数量增加了图形
我用 glm::perspective(80.0f, 4.0f/3.0f, 1.0f, 120.0f);并乘以 glm::mat4 view = glm::lookAt( glm::vec3(
我在 Shiny UI 中有一个情节。如果我更改任何输入参数并且通过 react 性图将会改变。但是让我们考虑以下情况:- Shiny UI 中的绘图可以说股票的日内价格变动。为此,您查询一些实时数据
我对 R 有点陌生。我在以下两个线程中跟踪并实现了结果: http://tolstoy.newcastle.edu.au/R/e17/help/12/03/7984.html http://lukem
我想在 WPF 控件中使用 GDI+ 绘图。 最佳答案 有多种方法可以做到这一点,最简单的方法是锁定您使用 GDI 操作的位图,获取像素缓冲区(从锁定中获取的 BitmapData 中的 Scan0
如何在以下取自其网站的绘图示例中隐藏颜色条? df % layout(title = '2014 Global GDPSource:CIA World Factbook',
我有两列数据,X 和 Y,每个条目在两个向量的小数点后都有 4 位数据。 当我使用 plot(x,y) 绘制简单图时,轴上显示的数据精确到小数点后两位。如何在两个轴上将其更改为小数点后 4 位精度?
我目前正在使用 Canvas 处理 JavaFX-Drawing-Application。在 GraphicsContext 的帮助下,我使用 beginPath() 和 lineTo() 方法绘制线
如果这个问题已经得到解答,但我无法找到我需要的东西,我提前道歉。我想从名为 data1.dat、data2.dat 的文件中绘制一些结果......我设法通过循环导入数据,但我无法使用循环绘制结果。仅
我的 pandas 数据框中有一个功能,可以(可能)具有多个级别。我可以使用以下方法获得独特的级别: reasons = df["Reason"].unique() 我可以通过执行以下操作在单个图表上
我在 Ubuntu 14 和 Windows 7(均为 64 位)中用 Python 绘制结果时遇到问题。作为一个简单的比较,我做了: from tvb.simulator.lab import *
以下代码相当简单 - 它用随机选择的像素填充设计表面 - 没什么特别的(暂时忽略第二种方法中的 XXXXXXX)。 private void PaintBackground() { Rando
我正在尝试制作一个绘制函数图形的 swing 应用程序(现在很简单,例如 x+2)但我在根据屏幕坐标制作我的点的数学坐标时遇到问题。我希望它在我的图表中简单地画一条从 P1(0,1) 到 P2(1,2
编辑 4:问题的新格式 背景:我有一个扩展 JFrame 的类 Window,在 JFrame 中我有一个 Canvas 。我向 Canvas 添加自定义对象。这个对象的唯一目的(为了争论)是在 Ca
我需要为即将到来的锦标赛标记阶梯,但我找不到任何方法来语义标记它。到目前为止我看到的唯一方法是 mark it up as a table ,我想不惜一切代价避免这种情况。 有什么想法吗? 最佳答案
我目前正在为一个小型 uC 项目编写 UI。在计算垂直线的位置时遇到一些问题。这个想法是将红线沿 x 轴移动到矩形的末端。 使用无限旋转编码器递增的值,范围为 0 到 800,增量为 1。矩形的左侧是
我正在尝试绘制光分布图。我想准确地执行此问题的第一步所要求的:Statistical analysis on Bell shaped (Gaussian) curve . 现在我有一组值。我希望数组元
我是一名优秀的程序员,十分优秀!