【问题标题】:setting the attr of printed text?设置打印文本的属性?
【发布时间】:2013-01-27 18:54:53
【问题描述】:

我正在设计一个光滑的 raphael 显示器,但我似乎无法在实例化后将 print() 的文本元素的属性设置为悬停:

var w = Raphael("weddings", 85, 30);
var fonts = [0, w.getFont("helvetica-neue-thin"), w.getFont("arial")];
w.print(0, 15, "Weddings", fonts[1], 20).attr({fill: "#000000"});

以下不会产生任何结果:

$("#weddings").hover(function () {
w.attr("color", "#000");
},
function () {
w.attr("color", "#FFFFFF");
});

我认为:

w.print.attr("color", "#FFFFFF");

可能会起作用,但不会。我在这里遗漏了什么?非常感谢任何帮助!

【问题讨论】:

    标签: hover raphael attr


    【解决方案1】:

    您是否先注册了字体?请参阅.registerFont() function

    然而,我有一个微弱的怀疑,你实际上并不想以这种复杂的方式呈现字体,而只是想在屏幕上写一些文本,然后在悬停时改变它。如果是这样,有一个非常简单的方法:

    var w = Raphael(0, 0, 85, 30);
    var text = w.text(0, 15, "Weddings").attr({'font-family': "helvetica-neue-thin", 'text-anchor': 'start', 'fill': '#000'});
    
    text.hover(
        function () {
            this.attr("fill", "#F00");
        },
        function () {
            this.attr("fill", "#000");
        }
     );
    

    (你仍然需要在某处加载字体,因为它不是标准的,但这是你的事。)

    【讨论】:

    • 好的,我成功了!您描述的“文本”方法以像素化的方式呈现文本,我需要抗锯齿文本...我确实将相同的逻辑应用于打印方法并通过元素 id 调用悬停以保持悬停区域的一致性一个矩形......另外,我注意到我在最初的问题中将“填充”称为“颜色”,所以这是另一件值得关注的事情......就像一个魅力!谢谢!
    猜你喜欢
    • 1970-01-01
    • 2012-08-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-01-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多