[jQuery]利用animate來製作左右移動圖片展示器

這個範例應該有很多人做過了,十分實用,如果把圖片縮小些,然後再加上燈箱的效果,應該可以拿來當展示產品或是照片等資訊,這個範例的發想是由男丁格爾的範例[jQ]用 jQuery 做廣告 – 上下垂直選項式廣告輪播來做修改的。

jQuery-Animate-API用法animate({css內容},[速度(整數)],[easing(linear/easein)],[callback])

想法,外層利用一個Div框住要製作動畫的內容,設定css的position: relative;然後內層的資料都用position: absolute;來設定left及top的pixel,如此可以把元件浮在最外層Div框的相對位置。

需要二個按鈕,浮在左邊及右邊,設定動作向左移及向右移。

畫面如下:範例網址

img元件設定title屬性的話,那文字會顯示在圖片下方一條bar上

jQueryAnimate1.png

Read More

[Java]JButton按鈕透明背景

要做swing套件的JButton透明背景有幾種方式,像是利用html-tag的background背景來設定、或是使用JLabel來e承載Image然後add至JButton裡等,不過使用JLabel的方式需要做些技巧才會有透明背景的效果出來。

使用html-tag的方式需要實際存在硬碟裡的圖檔,所以需要在使用前先Resize一份存到硬碟裡,而JLabel的方式則可直接Resize存在記憶體使用,使用的時機及優缺點都需要考量。

如果只是想單純在JButton裡加入圖片,那直接使用function setIcon會比較方便。

註:以下所有範例圖,均只有一個按鈕,會分成外框及內框,圖片需使用支援透明背景及去好背的圖,如png或gif。

下圖是setText使用html-tag設定body的background,會自動延展背景,所以如果只想出現一張背景圖時,圖的長寛與按鈕就需要控制好。能控制的範圍為內框裡,外框部份就不會延展背景圖了。

HtmlButton1.png

Read More

[Java]產生SVG向量圖形檔-xml圖形檔

SVG圖檔是一種利用xml及css來製作而成的一種向量圖形,放大或縮小均不會改變其品質,不過當圖形複雜到一定程式時,其檔案也會跟著變大很多,能夠設計SVG圖形作品的軟體工具包括Adobe Illustrator以及CorelDRAW等,要能查看svg檔案裡的圖形可以利用browser像是firefox、chrome都可以直接知道此向量圖形的內容。

Wiki SVG

在Java要輸出(產生)SVG檔很簡單,在Apache 套件裡有一個batik可以很簡單的就生成所要的SVG圖檔,只需要把原本在建立圖檔時使用的java.awt.Graphics2D變成使用org.apache.batik.svggen.SVGGraphics2D來繪製圖形就可以了。

產生的結果圖:

ToSVG.png

Read More

將文字加入圖片裡

如果有時需要把文字加到圖片裡,像是加入亂數碼、流水號等,要怎麼做呢?

方法很簡單,只需要先把input 檔案打開,再取得其畫筆,在我們要寫入文字的x y座標上,利用drawString把文字印上去就可以了。

首先我們先找一張圖,如果找不到的人可以利用以下這張圖,然後會在(150,113)印上"土地公"三個大字,顏色是紅色的、標楷體size 24。

1.jpg
Read More