![](/img/trans.png)
[英]How to change the size of an animated circle onclick using raphael js
[英]how to change size of raphael icons?
如何從免費的拉斐爾圖標改變圖標的寬度和高度?
我試圖使用attr
,試圖使用%
,就像這篇var paper = Raphael("canvas", 100%, 100%);
。
我需要這樣做:如果我改變父塊的大小,我的圖標的大小也會改變。
upd:我嘗試使用“scale”和“transform”,但是圖標從中心調整大小並且不能正確地適合父級
根據Raphael.js文檔
var el = paper.rect(10, 20, 300, 200);
// translate 100, 100, rotate 45°, translate -100, 0
el.transform("t100,100r45t-100,0");
// if you want you can append or prepend transformations
el.transform("...t50,50");
el.transform("s2...");
// or even wrap
el.transform("t50,50...t-50-50");
// to reset transformation call method with empty string
el.transform("");
// to get current value call it without parameters
console.log(el.transform());
檢查這個小提琴 :演示所有的變形
var icon = paper.rect(100,200,100,100);
var anim = Raphael.animation({
"10%":{transform:'t100,0'}, //transform on x-axis
"20%":{transform:'...t0,100'},//transform on y-axis
"30%":{transform:'...t-100,0'},//transform on x-axis(negative)
"40%":{transform:'...t0,-100'},//transform on y-axis(negative)
"50%":{transform:'...t200,200'},//transform diagonally
"60%":{transform:'...t-100,-100'},//transform diagonally(negative)
"70%":{transform:'...s1,1.5'},//scale y-axis
"80%":{transform:'...s1.5,1'},//scale x-axis
"90%":{transform:'...s2'},//scale in both direction
"100%":{transform:'...r45'},//rotate
},5000);
icon.animate(anim.delay(1000));
所以在你的情況下,你必須這樣做:
var somename = paper.path(“path coordinates”)。transform('s2,3');
其中2表示寬度,3表示高度。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.