- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个应显示不同类型图表的应用程序。应该显示两张或多张按用户得分定位的图像。好的,这与问题无关。所以我写了一个 jQuery 插件,它通过 json 接收值来绘制图形。
插件首先调用一个绘制图形线条的函数(有效),另一个函数在图形后面绘制网格(也有效)。
现在的问题是:主要部分遍历值数组并将 Kinetic.image 对象添加到返回并添加到舞台的层。:
$.each(this.data, function(key, value) {
$.each(value, function(secKey, secValue){
secValue.X = Math.floor((secValue.X - minX) * scaleX) + xOffset;
secValue.Y = Math.floor(yOffset + ((minY - secValue.Y) * scaleY));
coords.push(secValue);
});
});
$.each(coords, function(key, value){
var imageObj = new Image();
imageObj.src = value.image;
imageObj.onload = function() {
var image = new Kinetic.Image({
x: value.X,
y: value.Y,
image: imageObj,
width: 180,
height: 180
});
// add the shape to the layer
pictures.add(image);
};
});
return Array(pictures, popup);
最后呈现的页面有 4 个 Canvas 对象。而且,当我在 console.log() 阶段时,其中有图形、网格、图片和弹出窗口的图层,但未显示的是图像。图像的来源是可用的。检查了几次。
有没有人知道问题出在哪里?
提前致谢。
马蒂亚斯
最佳答案
你确认imageObj.onload正在执行了吗?由于浏览器缓存,在定义 imageObj onload 函数后设置 imageObj 的来源是标准做法。
接下来,您还需要确保在使用 layer.draw() 加载图像时重新绘制图层;回想一下,KineticJS 层不会在出于性能原因发生变化时自动重绘
关于javascript - Kinetic.js - 图像不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12578712/
您可以与此代码交互 here on jsFiddle 在 fiddle你可以看到我在旗杆(Kinetic.Line)上制作了一面旗帜(Kinetic.Rect)。我希望当用户将鼠标移动到旗帜或旗杆的任
我的 Canvas 上有 2 个 Kinetic.Image(A 和 B)。我希望当我尝试移动 A 时,只有 Kinetic.Image B 发生变化,而 A 不会改变它的位置。 我的代码是: A.o
我正在使用 kinetic js。我正在将图像、线条等添加到 kinetic.group 并尝试旋转该组并且它正在正确旋转。但是在旋转组之后,如果我尝试画一条线,它不会正确地绘制在当前的鼠标位置上。它
我试图防止旋转的标签被拖离屏幕,但我无法弄清楚如何使对象的 MinX、MaxX、MinY 和 MaxY 处于旋转状态。 getHeight 和 getWidth 仅返回旋转之前的值。 这是说明问题的示
在 KineticJS 中,如何绘制一 strip 有箭头的虚线? 例如: > > > > > > 我知道你会画一条虚线: var line = new Kinetic.Line({
我想添加 Textbox 或可编辑元素,让用户可以选择编辑文本。 这是我当前的代码: var text = new Kinetic.Text({ text: "Sample Text"
我正在尝试检测 Kinetic.Line 对象上的鼠标悬停。 根据文档, Kinetic.Line 确实具有 on 功能,因为它是节点的子节点。 on 函数将 mousemove 和 mouseove
我根据很棒的教程 here 使用 Kinetic JS 开发了一个交互式 map . 我想要实现的是在 map 下方显示 map 上的工作人员列表,然后发生一个事件,如果访问者从姓名列表中单击此人的姓
我正在尝试查找形状上的点击事件。当我单击像矩形这样的形状时,它会变成可拖动的山墙,但是当我单击它的外部时,它应该关闭其可调整大小的功能。我尝试使用模糊功能但不起作用。我不想在鼠标移出时使用它。问题是,
我尝试使用 Tweens 使用kineticjs 使文本淡入淡出,我成功地使文本随它们一起移动,但文本似乎没有淡出。 如果有人能解释我做错了什么,那就太好了 这是一个jsfiddle ,当出现“补间完
我正在尝试将箭头添加到我使用鼠标绘制的线条的开头和结尾,这是我绘制线条的脚本: document.getElementById('dLine').onclick = function() {
如果我有一条动力线 例如: line = new Kinetic.Line({ x: 80, y:80, points: [10, 10, 60, 60, 60-headlen
我试图根据 Canvas 的左上角获取线条的绝对位置。但是,我似乎只能根据最初绘制线条时的位置来取回相对位置(坐标)。 var line = new Kinetic.Line({
所以我想操作canvas,但是Kinetic JS似乎不起作用,不知道为什么。 此代码来自教程: $(function(){ var stage = new Kinetic.Stage({
我正在尝试将箭头添加到我使用鼠标绘制的线条的开头和结尾,这是我绘制线条的脚本: document.getElementById('dLine').onclick = function() {
我正在构建一个应显示不同类型图表的应用程序。应该显示两张或多张按用户得分定位的图像。好的,这与问题无关。所以我写了一个 jQuery 插件,它通过 json 接收值来绘制图形。 插件首先调用一个绘制图
我之前有一个基于 HTML5 Canvas 的应用程序,最近我将其转换为使用 Kinetic JS。我只需在包含的 div 上使用 Overflow: auto 即可在桌面浏览器和 IOS 中启用滚动
我尝试通过拖动 set true 并将其设置为对象来移动球对象以及鼠标指针。 这是我的 javascript 代码: $(document).ready(function() { var ar
我只是想为每个形状设置一个点击事件,我希望能够根据它们的 ID 向我显示它是哪个正方形。 var stage = new Kinetic.Stage({ container: 'container',
我正在尝试从数据库加载已保存的舞台,当我加载它时,它看起来不错,但在加载它之后我无法在舞台上绘制。我知道我可能无法像保存前那样使用加载的对象,但如何在加载后绘制到舞台上? 我正在使用 Kinetic.
我是一名优秀的程序员,十分优秀!