- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在圆圈悬停时显示上下文菜单,以向用户显示一些选择,并在单击时执行一些操作,但我无法做到这一点。
如何在鼠标悬停事件上显示带有拉斐尔元素(例如圆圈、线条)的上下文菜单,并在选择特定菜单项时执行某些操作?这是我尝试过的:
circle.hover(function () { showMenu(this); }).mouseout(function () { hideMenu(this); });;
以下是我的完整 HTML 代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/raphael-min.js"></script>
<script src="js/scale.raphael.js"></script>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<title></title>
</head>
<body>
<div id="divsCirclePts"></div>
<div id="divCanvas"></div>
<div id="subMenuContainer" style="display: none; background-color: whitesmoke; ">
<ul id="rankSubMenu" style="list-style-type: none;">
<li onclick="alert('open view')">Open View</li>
<li onclick="alert('open Live Dashboard')">Open Live Dashboard</li>
<li onclick="alert('call branch manager')">Call Branch Manager</li>
</ul>
</div>
<div id="divColors">
</div>
<style>
li:hover
{
background: #A5A5A5 !important;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var screenWidth = screen.width
var screenHeight = screen.height;
var circleRadius = 400;
var strokeWidth = 3;
var paper = ScaleRaphael("divCanvas", screenWidth, screenHeight);
// Creating big circle
var circle = paper.circle(screenWidth / 2, screenHeight / 2, circleRadius);
// Sets the fill attribute of the circle to red (#f00)
//circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#000");
circle.attr("stroke-width", 10);
var eltext = paper.set();
el = circle;
text = paper.text(screenWidth / 2, screenHeight / 2, "0 Min(s)").attr({ fill: '#ff0000' });
eltext.push(el);
eltext.push(text);
//var t = r.text(100, 100, 'test');
//t.attr({ "font-size": 16, "font-family": "Arial, Helvetica, sans-serif" });
eltext.attr({ "font-size": 22, "font-family": "Arial, Helvetica, sans-serif" });
eltext.translate(100, 100)
function resizePaper() {
var win = $(this);
paper.changeSize(win.width(), win.height(), true, false);
}
var arrayPointX = [];
var arrayPointY = [];
var arrayPointLineX = [];
var arrayPointLineY = [];
var arrayCount = 0;
for (var i = 0; i < 360;)
{
arrayPointX[arrayCount] = (screenWidth / 2) + (circleRadius * Math.cos((i) * Math.PI / 180));
arrayPointY[arrayCount] = (screenHeight / 2) + (circleRadius * Math.sin((i) * Math.PI / 180));
arrayPointLineX[arrayCount] = (screenWidth / 2) + ((i +1) * Math.cos((i) * Math.PI / 180));
arrayPointLineY[arrayCount] = (screenHeight / 2) + ((i + 1) * Math.sin((i) * Math.PI / 180));
arrayCount++;
i = i + 360 / 100;
}
//$("#divColors").append("");
for (var i = 0; i < arrayPointX.length; i++) {
var zColor = getRandomColor();
//$("#divColors").append(i + ": " + zColor + " zcolorlength:" + zColor.length + "</br>");
var imgURL = "img/markers/marker-ready.png";
var myImg = new Image();
myImg.src = imgURL;
var width = myImg.width;
var height = myImg.height;
//create the image with the obtained width and height:
var xDisplace = 100;
var yDisplace = 100;
var xImageDisplace = 90;
var yImageDisplace = 90;
//Drawing small circle on edge of big circle
//var circle = paper.circle(arrayPointX[i] + xDisplace, arrayPointY[i] + yDisplace, 10);
var image_1 = paper.image(imgURL, (arrayPointX[i] + xImageDisplace), (arrayPointY[i] + yImageDisplace), 20, 20);
//var circleLinetoCenterX = (arrayPointX[i] + xDisplace) - 350;
//var circleLinetoCenterY = (arrayPointX[i] + xDisplace) - 350;
var lnstr = "M" + (arrayPointLineX[i] + xDisplace) + " " + (arrayPointLineY[i] + yDisplace) + "L" + (arrayPointX[i] + xDisplace) + " " + (arrayPointY[i] + yDisplace);
//var line = paper.path(lnstr);/*.attr({ 'stroke-width': 5, });*/
//line.attr("stroke-width", 5)
var line;
if (i % 2 == 0) {
line = drawpath(paper, lnstr, 4000, { "stroke-width": strokeWidth, 'stroke': zColor }, function () { });
}
else
{
line = drawpath(paper, lnstr, 1500, { "stroke-width": strokeWidth, 'stroke': zColor }, function () { });
}
image_1.hover(function () { changeCircleColor(this); }).mouseout(function () { changeCircleColorBack(this); });;
line.hover(function () { /*alert(i)*/ });
line.insertBefore(image_1);
//line.animate({ "stroke-width": 5 }, 2000);
var midPointArrowLineX = ((arrayPointLineX[i] + xDisplace) + (arrayPointX[i] + xDisplace)) / 2;
var midPointArrowLineY = ((arrayPointLineY[i] + yDisplace) + (arrayPointY[i] + yDisplace)) / 2;
if (i % 2) {
//backward Arrow
// drawing from point to mid point
var lnstr = "M" + (arrayPointLineX[i] + xDisplace) + " " + (arrayPointLineY[i] + yDisplace) + "L" + (midPointArrowLineX) + " " + (midPointArrowLineY);
var line1 = paper.path(lnstr).attr({ 'arrow-end': 'classic-wide-long', 'stroke': zColor });
//var line1 = drawpath(paper, lnstr, 400, { "stroke-width": 5}, function () { });
line1.insertBefore(circle);
line1.animate({ "stroke-width": strokeWidth }, 2000);
}
else {
//forward Arrow
// drawing from mid point to point
var lnstr = "M" + (midPointArrowLineX) + " " + (midPointArrowLineY) + "L" + (arrayPointX[i] + xDisplace) + " " + (arrayPointY[i] + yDisplace);
var line2 = paper.path(lnstr).attr({ 'arrow-start': 'classic-wide-long', 'stroke': zColor });
//var line2 = drawpath(paper, lnstr, 400, { "stroke-width": 5, 'arrow-start': 'classic-wide-long' }, function () { });
line2.insertBefore(circle);
line2.animate({ "stroke-width": strokeWidth }, 2000);
}
}
resizePaper();
$(window).resize(resizePaper);
});
function changeCircleColor(circle) {
alert('q');
}
function changeCircleColorBack(circle) {
alert('q');
}
function getRandomColor()
{
var zColor = '#' + (Math.random() * 0xFFF << 0).toString(16);
if (zColor.length < 3 || zColor.length == 3) {
zColor = '#' + (Math.random() * 0xFFF << 0).toString(16);
}
if (zColor.length < 3 || zColor.length == 3) {
zColor = '#' + (Math.random() * 0xFFF << 0).toString(16);
}
if (zColor.length < 3 || zColor.length == 3) {
zColor = '#' + (Math.random() * 0xFFF << 0).toString(16);
}
return zColor;
}
function drawpath(canvas, pathstr, duration, attr, callback) {
var guide_path = canvas.path(pathstr).attr({ stroke: "none", fill: "none" });
var path = canvas.path(guide_path.getSubpath(0, 1)).attr(attr);
var total_length = guide_path.getTotalLength(guide_path);
var last_point = guide_path.getPointAtLength(0);
var start_time = new Date().getTime();
var interval_length = 50;
var result = path;
var interval_id = setInterval(function () {
var elapsed_time = new Date().getTime() - start_time;
var this_length = elapsed_time / duration * total_length;
var subpathstr = guide_path.getSubpath(0, this_length);
attr.path = subpathstr;
path.animate(attr, interval_length, 'bounce');
if (elapsed_time >= duration) {
clearInterval(interval_id);
if (callback != undefined) callback();
guide_path.remove();
}
}, interval_length);
return result;
}
</script>
</body>
</html>
最佳答案
从OP评论中复制的答案:
这可以通过如下显示 div 来解决:
$('#subMenuContainer').css({ 'top': image.getBBox().y + displace, 'left': image.getBBox().x + displace, 'position': 'absolute', 'border': '2px solid black' });
关于javascript - 如何在鼠标悬停时显示带有拉斐尔元素(圆形、线条)的上下文菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29147836/
您如何确定在鼠标事件上单击了哪些鼠标按钮? 我想区分左键和右键。 最佳答案 我不确定点击事件(虽然它可能值得一试)但是如果你使用应该足够好的 mousedown 事件,那么你可以检查事件的“which
如此处所示:http://raphaeljs.com/reference.html#Element.transform Raphael 的变换允许我移动元素,但不改变元素的属性。 但正如这里所解释的:
按照 this question 的回答我正在尝试禁用默认浏览器上下文菜单并显示自定义菜单。正如您在 jsfiddle 中看到的那样,右键单击会显示矩形,但会显示默认菜单。我尝试了 Chrome 和
下面代码的目的是当鼠标悬停在蓝色或红色矩形上时显示红色矩形。请注意,红色矩形与蓝色重叠。 问题是,当鼠标悬停在红色矩形上时,它开始闪烁和/或消失,正如您在此 jsfiddle 中看到的那样 我什至为红
当您将鼠标悬停在 raphael 元素上时,我试图制作一些动画。 看这里的例子: http://jsfiddle.net/GVEqf/24/ 当您将鼠标悬停在正方形上时它会放大,当您停止悬停时它会缩小
我正在处理的对象后面有一个对象,我不想点击这个第一个元素,我想点击它下面的那个。 是否可以让 raphael 中的元素停止接收事件,但仍然保持可见? 最佳答案 事件冒泡,所以它后面的对象仍然会收到点击
我在 Canvas 上有一堆拉斐尔圆形物体,在许多情况下它们重叠,有时一个较小的圆圈被位于其顶部的较大圆圈完全覆盖。在这种情况下,我希望当鼠标悬停在较小的圆圈上时,或者更准确地说,当鼠标悬停在它包含的
我正在使用 Raphael 来处理 SVG。而且,我想在每个路径中添加文本。我怎样才能做到这一点?这是我在 jsfiddle 上的代码. 谢谢 最佳答案 当您说在每个路径中添加文本时,您的意思是像这样
我正在使用 Raphael JS 矢量库,但我无法获得正在绘制的线条(路径)以更改颜色。希望这只是我做的蠢事。 var blue_one = paper.path ("M205 205L300 300
很快我将不得不制作一个 JS 浏览器应用程序,为此我需要使用一些图形库来绘制一些对象/形状(正方形、圆形……没有不规则的)。我需要能够应用“纹理”(理解为:为形状设置背景图像)并处理事件(单击和拖动)
我一直在努力解决以下问题。 我有一个元素,我想用一张图片填充它。 Raphael 在其默认设置下使用图案,从而重复图像。 我找到了 http://xn--dahlstrm-t4a.net/svg/ra
我正在使用 Raphael js 在客户端创建一些图形。但我现在希望能够直接在服务器上做同样的事情,以便能够创建它们并批量存储它们。 我找到了从客户端获取 SVG 形式 Raphael 的解决方案,但
有谁知道在使用 Raphael 时如何根据文本相对于另一个对象的位置更改文本的外观? 我创建了一个 JS fiddle 来演示我的意思(链接如下)。 在这个例子中有一个橙色的矩形和一些部分重叠的文本。
我已经从 Illustrator 图像创建了 SVG 文件。我正在使用这个:https://github.com/wout/raphael-svg-import导入并显示矢量图像。 我以文本形式读取
我正在关注 netuts 的关于 raphael js 的教程,但我不明白其中一个示例,有人可以用更简单的英语向我解释一下吗?我知道我应该首先了解更多关于 javascript 的知识。 for(va
我创建了一个圆,我可以在圆的圆周上选择两个点。 我想填充这两点之间的部分。 Demo 如果你看到演示,我想填充两点之间的 Angular 。 JS: (function (Raphael) {
如何像逐渐绘制一样为矢量路径设置动画?换句话说,逐像素缓慢显示路径。 我正在使用 Raphaël.js,但是如果您的答案不是特定于库的——比如可能有一些通用的编程模式来做那种事情(我'我是矢量动画的新
我一直在与 Raphael 合作在 Canvas 上创建拖放形状。我使用 .drag() 函数(Raphael 框架中提供)以及我的事件函数来执行此操作。我这样做没有任何问题。 我还有一个创建新形状的
是否有任何选项可以避免 Raphaël 中条形图之间的空格? 有一个选项可以管理栏空间,不幸的是gutter选项会影响栏的宽度。遗憾的是我没有足够的积分来上传图片:( 这是我的代码 var effic
您好,在此先感谢您的帮助。为了这个,我整天都在敲键盘,需要一些帮助。我对 JavaScript 和 Raphael 还很陌生,所以希望这不是很明显的东西 - 但我花了很多时间谷歌搜索、检查文档,并在这
我是一名优秀的程序员,十分优秀!