问题标签 [jcanvas]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
88 浏览

javascript - 如何使用 jCanvas 在曲线形状的中心设置文本?

我正在使用 drawLine 方法用 jCanvas 绘制“地图”,并且需要将门牌号放在曲线形状的中心(它可以有随机数量的角度)。

另请注意,所有对象都是可拖动的,并且文本必须是可拖动的。

或者我如何计算可以具有随机角度数的物体中心?

0 投票
1 回答
70 浏览

html - html5 画布中的尺寸

我对 HTML5 Canvas 有疑问。我使用 jCanvas 向画布添加图层,但尺寸有问题。

我有 2 个矩形,一个绿色一个红色一个。现在我想让红色框触摸绿色的左上角。

使用坐标系,我从坐标 200、200 开始绿色,然后红色必须从 0,0 开始,宽度和高度必须为 200 和 200。但这不起作用

检查这个例子

为什么这不起作用?

当我使用100x100 尺寸时,它确实有效

0 投票
0 回答
46 浏览

javascript - 如何在 kineticjs 中的透明层上应用图案?

我正在尝试使用 kineticjs 在透明层上应用图案(即图像)。但它正在应用像正方形这样的图案。它也不应该是正方形的,它应该与顶层合并,因为顶层有阴影效果。这里是我的代码,如何完成它。

这是截图(我的结果):http: //i.stack.imgur.com/u3wWx.png

预期结果是这样的:http: //i.stack.imgur.com/0oFGU.png

0 投票
1 回答
77 浏览

html5-canvas - 更新画布而不悬停

我正在使用 jCanvas 库制作类似 MS Paint 的东西。我在画布外面放了一个按钮。该按钮顺时针旋转所选图层,但除非我用鼠标悬停画布,否则我看不到任何变化。我希望在按下按钮时旋转图层。

我尝试使用 restoreCanvas() 函数,但它不起作用。当按下按钮时,如何使画布自动刷新?

抱歉英语不好。

0 投票
2 回答
992 浏览

javascript - 桌面和移动设备上的 HTML5 画布

我正在构建一个 Web 应用程序,用户可以在其中使用 HTML5 Canvas 创建自己的图像。(我也在使用 Jcanvas)。

在桌面上,画布大小为 500x500(因此,它生成 500x500 像素的图像)。

在移动设备上,画布大小为 300x300,但我仍然想生成大小为 500x500 像素的图像。

现在,我不知道,我不能让它工作!

0 投票
0 回答
141 浏览

jquery - 在 Node 上绘制 jCanvas 图像

所以我在 Windows 上,我遵循了在节点上运行 jCanvas 的示例:https ://github.com/robertjustjones/jcanvas-in-node

而且我可以使示例正常工作,但是当我尝试使用 jCanvas 的绘制图像功能时遇到问题,例如:

我遇到的问题是我返回了一些数据:base 64 encoding of just a blank canvas。

更奇怪的是,在 Linux 上运行 Node 时,我只是undefined从以下位置返回:

0 投票
1 回答
868 浏览

javascript - 使画布图像可移动(可拖动)

我有一个画布区域,我正在向其中添加一些图像,我想让我的画布图像可拖动。我通过 addEventListener 创建了鼠标事件来处理鼠标点击。
但我的问题是我能够使所有画布上下文都可拖动,而不仅仅是我的图像。

html代码:

部分JS代码:

是否有可能使第一个图像( gkhead )仅在画布区域中可移动,而第二个(球)图像仅在第一个( gkhead )图像区域中可移动?
这是我的小提琴
谢谢大家的建议。

0 投票
1 回答
102 浏览

javascript - 当我在事件处理程序中引用对象的参数时,即使将参数设置为对象,该参数也始终为 null

这是我的第一个 Stack Overflow 问题,因为我通常会在谷歌上找到答案,所以请耐心等待...

我正在从事一个涉及大量操作画布元素的项目。为此,我导入并使用了 jQuery 和 jCanvas。我也在 E​​CMAScript 6 中编写代码。为了更简单的日志记录方法,我使用了 loglevel(因此是“log.debug”和“log.info”等,而不是“console.log”)。

目前,我的问题是事件处理程序与我用于存储有关每个画布的数据的对象进行了一些奇怪的交互。基本上,在我的 mousedown 和 mousemove 处理程序中,我使用 getCanvasData 函数来检索特定画布的数据对象,我显然成功地检索到了,但是当我访问“拖动”参数时,它始终为空。在代码的其他部分,我成功地将该值更改为一个对象,但是每当事件处理程序访问它时,无论如何它仍然是 null。我已经通过为属性创建一个 getter 和 setter 来测试它是否真的为 null,该属性会在其更改时打印出其状态(我在最后提供了该代码片段,它是 getCanvasData 函数中“数据”赋值的替代品)。

如果您想查看当前形式的完整代码,您可以查看我当前托管的项目。这是一个实时版本,这意味着它与我的工作环境同步。当我在家里修改一些东西时,它会更新网站(所以如果你来自未来 - 它可能已经关闭或完全不同)。

在网站上,移动处理程序应该负责在您生成一个(通过单击输入或输出之一)时移动电线/连接器的一端。由于处理程序无法检索“拖动”,因此电线永远不会跟随鼠标。但是,当您单击另一个输入/输出(请记住,输入仅连接到输出,反之亦然)时,它将在它们之间连接线 - 通过访问“拖动”属性(“拖动”是参考电线本身)并对其执行操作。由于您可以连接电线,这意味着在处理程序外部成功引用了“拖动”,但不在处理程序内部。

getCanvasData() 函数:

我将不同的处理程序分配给某个类的所有画布的部分代码:

mousedown 和 mousemove 处理程序:

我用来检查“拖动”状态的代码片段:

当上面的代码生效时,我得到一个打印输出通知我“拖动”更改为“对象对象”,但是当我移动鼠标(触发 mousemove 事件)时,我得到一个打印输出告诉我它是“空”(不是甚至未定义)。当我的项目的其他部分使用它时,它会成功使用它并实际检索对象。

0 投票
1 回答
109 浏览

javascript - 在 jcanvas 中如何操作 drawImage 层以在图像上应用类似 Instagram 的过滤器

我已经使用 jcanvas drawImage 方法在画布上绘制了一个图像,这个图像是一个图层

//js部分

//HTML部分

我想在这张图片上应用类似 Instagram 的图片过滤器,有人可以指导我吗?

0 投票
0 回答
167 浏览

javascript - jCanvas - setPixels()

除了一件事之外,jCanvas 的一切都很好。我无法让 setPixels () 工作,当我在 Chrome 和 Safari 中运行代码时,什么也没有发生。

我已经从 jCanvas 网站上的 Sandbox 复制了示例代码(当我在浏览器中查看时,一切正常)。

有人对我可能做错了什么有建议吗?