个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我想将 Angularjs 与 Kineticjs 一起使用。问题是，angular 似乎覆盖了我的舞台对象上的鼠标事件。
以下 html 作为独立文件 工作正常，您可以对其进行测试。但是如果你把它作为一个 Angularjs 模板，鼠标事件就会停止工作。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#container {
background-color: black;
background-image: url("http://www.html5canvastutorials.com/demos/assets/line-building.png");
background-position: 1px 0px;
background-repeat: no-repeat;
width: 580px;
height: 327px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
<script defer="defer">
function getData() {
return {
'1st Floor': {
color: 'blue',
points: [366, 298, 500, 284, 499, 204, 352, 183, 72, 228, 74, 274]
},
'2nd Floor': {
color: 'red',
points: [72, 228, 73, 193, 340, 96, 498, 154, 498, 191, 341, 171]
},
'3rd Floor': {
color: 'yellow',
points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93]
},
'Gym': {
color: 'green',
points: [498, 283, 503, 146, 560, 136, 576, 144, 576, 278, 500, 283]
}
}
}
function updateTooltip(tooltip, x, y, text) {
tooltip.getText().setText(text);
tooltip.setPosition(x, y);
tooltip.show();
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 325
});
var shapesLayer = new Kinetic.Layer();
var tooltipLayer = new Kinetic.Layer();
var tooltip = new Kinetic.Label({
opacity: 0.75,
visible: false,
listening: false,
text: {
text: '',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
},
rect: {
fill: 'black',
pointerDirection: 'down',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOpacity: 0.5
}
});
tooltipLayer.add(tooltip);
// get areas data
var areas = getData();
// draw areas
for(var key in areas) {
var area = areas[key];
var points = area.points;
var shape = new Kinetic.Polygon({
points: points,
fill: area.color,
opacity: 0,
// custom attr
key: key
});
shapesLayer.add(shape);
}
stage.add(shapesLayer);
stage.add(tooltipLayer);
stage.on('mouseover', function(evt) {
var shape = evt.targetNode;
shape.setOpacity(0.5);
shapesLayer.draw();
});
stage.on('mouseout', function(evt) {
var shape = evt.targetNode;
shape.setOpacity(0);
shapesLayer.draw();
tooltip.hide();
tooltipLayer.draw();
});
stage.on('mousemove', function(evt) {
var shape = evt.targetNode;
var mousePos = stage.getMousePosition();
var x = mousePos.x;
var y = mousePos.y - 5;
updateTooltip(tooltip, x, y, shape.attrs.key);
tooltipLayer.batchDraw();
});
</script>
事件处理如何在 Angular 上工作？以及如何防止覆盖以下事件:
stage.on('mouseover', function(evt) {
var shape = evt.targetNode;
shape.setOpacity(0.5);
shapesLayer.draw();
});
谢谢!
最佳答案
好的，看起来 Angular 正在捕获所有 DOM 事件。
解决方案是将 Kineticjs 标记放在 angular.js 之前(也可能在 jQuery 之前)，并确保你不要再次声明该标记别处在任何 View 中。
关于javascript - Angularjs + Kineticjs 鼠标事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16660418/
27
4
0
似乎缺乏关于 KineticJS 中 Color 是什么的文档(如果我错了，请告诉我) 到目前为止，我通过反复试验发现，我实际上可以将以下内容传递给 setFill 类中的 Shape 之类的函数:
我发现 KineticJS 过滤器文档非常令人沮丧，无法在网上找到示例，尤其是考虑到亮度。 kinetic.filters 文档 link提及 Kinetic.Filters.Brighten(ima
我有一个用 Box2Dweb 模拟的 body 和一个附着在 body 上的图像。我想采用 body 变换矩阵并将变换应用于图像(用变换绘制图像)，使其在屏幕上的位置和方向(相对)与 body 的位置
我需要用 KineticJS 绘制动画 gif，但是，当我按照 image tutorial 时，我失败了.有什么方法可以画gif动画吗？ 最佳答案 使用 KineticJS Sprite。 动画 G
有没有办法在 KineticJS 的 Text 对象中设置字体粗细？ 这里是示例代码: var myText = new Kinetic.Text( { x: 350, y:
我正在使用 KineticJS 开发一个简单的绘画程序。我要实现的是用鼠标移动绘制一个矩形、直线或圆形，绘制的形状可以通过鼠标拖动或调整大小。我的问题是，我必须使用 mousedown 和 mouse
我有一个 SVG Sprite ，其架构如下: Image Image Image Image Image Image Image Image Image 其中 Image 是图像，所有九个图像都
我正在尝试 KineticJS 并查看此示例: var stage = new Kinetic.Stage({ container: 'container', width: 500, he
突然，一个简单的动画在 Chrome(大约 30fps)和 firefox(大约 7fps)中具有不同的帧速率。这是正确的行为吗？我可以在动画函数中调整 framRate 吗？ 最佳答案 试试这个 /
我想实现一个函数，它将一个组和一个矩形作为参数，并检查该矩形是否属于该组。如果它属于组，我想从组和图层中完全删除该矩形。我尝试了 group.remove() 和 group.getChildren(
在 KinectJS ，如何创建阴影(即边缘模糊的半透明形状)而不绘制“转换”它的形状？ 一开始我以为可以让形状投下阴影，但将形状本身的不透明度设置为零。像这样: var rect = new Kin
我正在向舞台添加一个图像作为背景图像和一个矩形。如何确保矩形在舞台上居中并且背景会根据浏览器调整大小？ var stage = new Kinetic.Stage({ container: 'c
我正在尝试更改鼠标悬停在图像上的鼠标指针，这是我的脚本: var sc = new Kinetic.Layer(); var sCirc
我正在使用 KineticJS 来允许用户操作他们的图像——裁剪、旋转、缩放、翻转等。 当我对图像应用任何变换时，效果很好。但是当我应用第二个变换时，它作用于原始的、未变换的图像，而不是我的新图像。
我想使用使用kineticjs的钢笔工具(如photoshop)，我不知道如何实现这一目标。 可不可以？如果可能的话请帮助我找出解决方案。 我正在使用kinetic-v5.0.1.min.js和kin
我想知道 Kinetic 中是否有某种方法可以将图像与较低层上的另一个图像合并，从而根据“裁剪”图像的形状创建一种裁剪效果。 因此图像必须具有透明背景，这对我来说是困难的主要来源。否则我只会使用关闭拖
我一直在尝试在 KineticJs 阶段的“mousemove”上返回鼠标位置。我的想法是在舞台对象上添加 jQuery 事件处理程序... 我遇到了一个问题，但是有一个错误...... 未捕获类型错
我想提高 Canvas 对象的移动拖放性能。我有一个包含不同形状(图像、星星、记录...)的组。我想使用缓存来提高拖放或旋转整个组时的性能。 这是我创建的 JSFiddle:http://jsfidd
我试图模仿这个 other's Stackoverflow canvas clipping function在 KineticJS 中具有可拖动图像的附加功能，但我无法完成它。 fiddle :htt
使用 KineticJS 5.1.0 我有一个带有描边的 KineticJS 图像。我想对此图像应用滤镜。缓存并应用过滤器后，笔划消失了。 Here is a JSFiddle和我的演示代码: var
我是一名优秀的程序员,十分优秀！