程式師世界 >> 編程語言 >> JAVA編程 >> 關於JAVA >> Web Chart入門（5） 4

Web Chart入門（5） 4

編輯：關於JAVA

實戰draw2d(Raphael)之取消Chrome中Label Text 全部選中

情況描述

這裡使用的是Rectangle , 裡面加入一個Label 或多個Label 的組合圖形。

在Chrome裡拖拽圖形的時候，偶爾會把所有Rectangle包含的Label 全部以深藍色底色。

需要在非Canvas的區域點擊一下，深底色才消除。

以上的狀況出現在IE和Chrome都會有，但幾率倒不是很大。在Firefox 中沒有這個問題。

問題考慮與重現

既然不是所有流量器都有這個問題，應該和浏覽器有一定的關系。

google 一下 “Chrome 頁面全選中”，果然找到一些線索。

Chrome 和其他流量器本身提供了文本部分和全部選中的功能，選擇之後的效果就是反底色。

在非Canvas區域盡量多選一些文本，果然Canvas區的圖馬上就有那種效果了，問題很容易重現了。

看來這個問題不光是chart 會遇到。

既然是選中導致，那是否設置不可選中的CSS是否就可以了呢？先看看如何設置不可選取的樣式

在 Chrome 中：

body    
{    
 -webkit-user-select: none;    
}

在Firefox 中：

body    
{    
 -moz-user-select: none;    
}

在IE中(不能通過設置 CSS達成，用以下方式)

<body onselectstart="return false">

問題解決

以上的設置是對整個頁面進行設置，這並不是我的要求。

對Chrome 和 FireFox ,可以對指定的頁面元素使用以上CSS樣式。

回歸到draw2d, 如何給Label 設置這個CSS,

1. 初步想法是看看能否找到直接設置CSS的方式， as shape.style.XXX= XXX, 沒有找到。

看來只能底層一點的Raphael方式設置頁面元素的CSS了。

2. 設置點：

最初考慮的設置點是init or repaint但是發現都失敗了。

正確是設置在 Label定義的createSet的方法裡。

修改如下：

createSet: function () {  
    var newShape = this.canvas.paper.text(0, 0, this.text, this.getTitle(), this.getWeight());  
    //not select text  
    if(isChrome)  
    {  
        ($(newShape.node)).css('-webkit-user-select', 'none');  
    }  
    return newShape;  
}