創造一個圓形

『壹』 怎麼在 photoshop 里新建一個圓形文件

在 photoshop 中，不能新建圓形文件。

數碼相片與實物的紙質相片不同，實物的紙質相片，可以裁剪成任意的復雜形狀，而數碼相片只能是方形。

平常看到的多邊形、圓形等任意形狀的數碼相片，其實它仍然是一個矩形形狀，只是那形狀邊緣填充了白色，給人形成了一種錯覺。如下圖：

『貳』 如何創建一個圓形的按鈕

教程參考Colin Garven提出的實現圓形進度按鈕的思路。我們將使用Jake Archibald講過的SVG素描動畫技術來實現圓形進度過程，然後提供一個成功或失敗的狀態來顯示完成後的最終狀態。
今天給大家展示如何實現一個漂亮的進度按鈕的思路，這個思路來自於Colin Garven的不可思議的提交按鈕。我們首先看一下實現這個思路需要的步驟，順便欣賞一下這個動畫^^。正如Colin在評論中提到的，實現這個按鈕背後的想法如下：一旦點擊，提交按鈕就變成一個圓環，並且使用這個圓環的邊界展示一個進度動畫。當這個進度動畫完成時，按鈕將再次恢復成原來大小，同時會顯示一個標記用來確認提交已完成。接下來我們將完成這個思路，並且針對提交失敗的情況我們添加另一個標記。
如果只考慮CSS技術，也是有可能實現這樣的按鈕和動畫效果的。其中最具挑戰的部分還是環形的進度效果，這里提供一個聰明的技巧——使用Clip屬性來實現進度效果。關於這個技巧，Anders Ingemann寫了一篇詳實的教程。但是這次我們還是基於SVG技術,CSS轉換和一點兒JavaScript來實現。關於環形進度效果和叉號，我們將使用Jake Archibald介紹的動畫素描技術。
需要注意的是動畫SVG在瀏覽器的兼容上還是存在問題，這些類型的技術仍在起步階段，所以本教程只用來實驗練習，期待在未來可以派上用場。
所以，讓我們開始吧。
如果你有仔細觀察Colin的Dribbble上展示的效果動畫，可能已經注意到，我們需要關注按鈕的幾個狀態。
有意思的部分是按鈕從一個狀態轉換成另一個狀態。
首先，我們要使用透明背景和邊框顏色來展示一個簡單的按鈕，滑鼠懸停時，我們使用邊框色來填充該按鈕，並且把按鈕上的文本變成白色。
AnimatedProgressButton01_hover (1)
當我們點擊按鈕(例如,為了提交一個表單)，我們要淡出文本，減少按鈕的寬度使它變成一圓圈，並且使按鈕的邊框變厚，在邊框上開始一個進度動畫。我們將使用SVG圓圈來實現進度動畫，因此我們需要確保動畫開始的瞬間，按鈕圓圈和SVG圓圈大小一致，位置一致。然後我們繪制圓的邊線，模擬提交的過程。
AnimatedProgressButton02_progress
一旦提交完成，即邊線都繪制完。我們必須使按鈕再次擴大到原來大小，並且在提交成功時繪制對號，把按鈕的顏色變成相應的顏色。
AnimatedProgressButton03_success
提交失敗的情況下,我們也需要一個錯誤狀態的風格。
AnimatedProgressButton04_error
接下來，讓我們創建標記與我們所需要的元素。
為創建我們的標記，我們需要一個主容器，一個按鈕(其中有包含文本的一個span元素)和三個SVG:
<!-- progress button -->
<div id="progress-button" class="progress-button">
<!-- button with text -->
<button><span>Submit</span></button>
<!-- svg circle for progress indication -->
<svg class="progress-circle" width="70" height="70">
<path d="m35,2.5c17.,0 32.5,14. 32.5,32.5c0,17. -14.,32.5 -32.5,32.5c-17.,0 -32.5,-14. -32.5,-32.5c0,-17. 14.,-32.5 32.5,-32.5z"/>
</svg>
<!-- checkmark to show on success -->
<svg class="checkmark" width="70" height="70">
<path d="m31.5,46.5l15.3,-23.2"/>
<path d="m31.5,46.5l-8.5,-7.1"/>
</svg>
<!-- cross to show on error -->
<svg class="cross" width="70" height="70">
<path d="m35,35l-9.3,-9.3"/>
<path d="m35,35l9.3,9.3"/>
<path d="m35,35l-9.3,9.3"/>
<path d="m35,35l9.3,-9.3"/>
</svg>
</div><!-- /progress-button -->
我們預先使用Method Draw（一個易於使用的在線SVG編輯器）繪制對號和叉號。所有SVG的尺寸為70×70，因為我們按鈕的高度為70像素。我們希望圓的邊線為5像素，這樣看起來更像Colin的效果。當我們在圖形編輯器中繪制時，需要設置正確的半徑，整個圓連同它的邊線為70像素。需要注意在SVG中邊線為半嵌入式（即一半在圓內一半在圓外），例如，邊線為2，半徑為10的圓，它的寬和高為20+2，而不是10+4（邊線的2倍），因此公式為2r+邊界。所以在我們的案例中我們知道2r+5 = 70,因此我們需要一個半徑為32.5的圓。最終得到的形狀為：
<circle cx = "35" cy="35" r="32.5"/>
不幸的是，我們不能僅僅使用這個基本的形狀，因為「路徑」的起點在瀏覽器中是不同的，所以我們不能控制「進度動畫」的起始點。所以，我們需要把這個圓轉成路徑，而不是（上面的基本形狀）。你可以使用Method Draw中Object菜單下的Convert to Path很容易實現。
叉號我們將使用4個路徑，這樣我們可以從中心點開始繪制，使它看起來跟對號的動畫類似。
現在我們有了我們需要的所有元素。讓我們想想操作的流程，開始樣式！
首先，我們需要給按鈕容器添加樣式。它就像按鈕的外層皮膚，讓我們使它更像一個按鈕，我們把它的顯示設置為inline-block。這樣我們可以在文檔流里使用它。
.progress-button {
position: relative;
display: inline-block;
text-align: center;
}
我們的按鈕需要一些著色和排版，為了讓它看起來更像Colin的按鈕，我們需要設置正確的邊框，使用Montserrat字體：
.progress-button button {
display: block;
margin: 0 auto;
padding: 0;
width: 250px;
height: 70px;
border: 2px solid #1ECD97;
border-radius: 40px;
background: transparent;
color: #1ECD97;
letter-spacing: 1px;
font-size: 18px;
font-family: 'Montserrat', sans-serif;
-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
}
我們還需要為那些將使用動畫的屬性添加一個過渡效果，如background-color,width等等。
在滑鼠懸停時，我們將更改背景色和字體色：
.progress-button button:hover {
background-color: #1ECD97;
color: #fff;
}
讓我們移除任何高亮的輪廓：
.progress-button button:focus {
outline: none;
}
所有的SVG需要絕對定位在中心位置，並且我們將不允許任何pointer-events：
.progress-button svg {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}
因為我們只想操作邊線，所以路徑不應該有任何填充。路徑除了在特殊狀態下，其他狀態都不需要展示它們，所以我們通過設置它們的透明度為0來隱藏它們。
.progress-button svg path {
opacity: 0;
fill: none;
}
我們的進度環將通過設置圓形路徑的邊線為5來實現：
.progress-button svg.progress-circle path {
stroke: #1ECD97;
stroke-width: 5;
}
成功/錯誤的指示符號將由細的白色邊線繪制，我們還將設置邊線的linecap為round,這樣看起來更加柔和。這兩個符號都會有一個快速的不透明度的過渡效果。
.progress-button svg.checkmark path,
.progress-button svg.cross path {
stroke: #fff;
stroke-linecap: round;
stroke-width: 4;
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
}
現在讓我們回顧一下，記住我們的總體規劃。我們需要可以「樣式化」按鈕和它的特殊元素的三種額外狀態（除了默認狀態），載入狀態，成功和錯誤的狀態。因此我們將使用類「loading」,」success」,」error」來表示這三種狀態。
當我們開始載入過程時，這個按鈕將轉變成一個圓，看起來更像一個表示進度的圓環。
.loading.progress-button button {
width: 70px; /* make a circle */
border-width: 5px;
border-color: #ddd;
background-color: transparent;
color: #fff;
}
還記得么，我們在定義按鈕樣式時已經設置了過渡效果。
當我們開始進度動畫時，文本應該快速淡出。
.loading.progress-button span {
-webkit-transition: opacity 0.15s;
transition: opacity 0.15s;
}
……通過設置opacity為0：
.loading.progress-button span,
.success.progress-button span,
.error.progress-button span {
opacity: 0; /* keep it hidden in all states */
}
當從載入狀態變成成功或錯誤的狀態時，我們不需要設置過渡，只需把文本簡單的隱藏掉就可以。
當我們刪除所有類返回到默認狀態時，我們需要稍長一點兒的時間來顯示文本。所以我們需要定義不同的過渡和延時時間來回到正常的顯示狀態。
/* Transition for when returning to default state */
.progress-button button span {
-webkit-transition: opacity 0.3s 0.1s;
transition: opacity 0.3s 0.1s;
}
當我們到達最後的狀態，提交成功或失敗。這時我們需要重新定義一下按鈕的過渡效果。
.success.progress-button button,
.error.progress-button button {
-webkit-transition: background-color 0.3s, width 0.3s, border-width 0.3s;
transition: background-color 0.3s, width 0.3s, border-width 0.3s;
}
接下來我們為最終狀態設置顏色相關的樣式：
.success.progress-button button {
border-color: #1ECD97;
background-color: #1ECD97;
}
.error.progress-button button {
border-color: #FB797E;
background-color: #FB797E;
}
當我們應用相應類的同時，需要展示SVG路徑，並通過下面設置的過渡效果來實現stroke-dashoffset的動畫。

.loading.progress-button svg.progress-circle path,
.success.progress-button svg.checkmark path,
.error.progress-button svg.cross path {
opacity: 1;
-webkit-transition: stroke-dashoffset 0.3s;
transition: stroke-dashoffset 0.3s;
}
通過定義一個額外的樣式類為按鈕的寬度動畫添加一些可選的easing
.elastic.progress-button button {
-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1), border-width 0.3s, border-color 0.3s;
-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
}
.loading.elastic.progress-button button {
-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, 0, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
}
如果你想研究其他的easing函數，可以使用Ceaser,這個工具是由Matthew Lein提供的CSS Easing動畫工具。

目前為止樣式已經OK，讓我們繼續我們的魔術^^
JAVASCRIPT
我們將首先初始化/緩存一些元素:button是一個HTML的按鈕元素，progressEl是SVG元素用來表示圓形進度條，successEl,errorEl兩個SVG元素分別用來表示對號和叉號。
function UIProgressButton( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}
UIProgressButton.prototype._init = function() {
this.button = this.el.querySelector( 'button' );
this.progressEl = new SVGEl( this.el.querySelector( 'svg.progress-circle' ) );
this.successEl = new SVGEl( this.el.querySelector( 'svg.checkmark' ) );
this.errorEl = new SVGEl( this.el.querySelector( 'svg.cross' ) );
// init events
this._initEvents();
// enable button
this._enable();
}
}

SVGEl.prototype._init = function() {
var self = this;
this.paths.forEach( function( path, i ) {
self.pathsArr[i] = path;
path.style.strokeDasharray = self.lengthsArr[i] = path.getTotalLength();
} );
// undraw stroke
this.draw(0);
}
// val in [0,1] : 0 - no stroke is visible, 1 - stroke is visible
SVGEl.prototype.draw = function( val ) {
for( var i = 0, len = this.pathsArr.length; i < len; ++i ){
this.pathsArr[ i ].style.strokeDashoffset = this.lengthsArr[ i ] * ( 1 - val );
}
}
接下來我們需要給按鈕綁定click事件。這個按鈕最初為一個圓形動畫（通過添加loading類）。該動畫結束後，現有的回調函數被調用（如果在options里有指定的話）或者我們只是將進行到100%（這個「假」動畫的速度與css中定義的stroke-dashoffset的過渡是相同的），在這個點時按鈕是不可點擊的。
UIProgressButton.prototype._initEvents = function() {
var self = this;
this.button.addEventListener( 'click', function() { self._submit(); } );
}
UIProgressButton.prototype._submit = function() {
classie.addClass( this.el, 'loading' );
var self = this,
onEndBtnTransitionFn = function( ev ) {
if( support.transitions ) {
this.removeEventListener( transEndEventName, onEndBtnTransitionFn );
}
this.setAttribute( 'disabled', '' );
if( typeof self.options.callback === 'function' ) {
self.options.callback( self );
}
else {
self.setProgress(1);
self.stop();
}
};
if( support.transitions ) {
this.button.addEventListener( transEndEventName, onEndBtnTransitionFn );
}
else {
onEndBtnTransitionFn();
}
}
一旦進度達到100%,我們需要重置的圓形進度條的路徑。同時,我們會顯示成功的對號標識或錯誤的叉號標識的路徑。一段時間後(options.statusTime)我們「拉開」任何狀態指示器的路徑，再次啟用按鈕。注意,如圖所示,我們通過CSS控制轉換。
UIProgressButton.prototype.stop = function( status ) {
var self = this,
endLoading = function() {
self.progressEl.draw(0);
if( typeof status === 'number' ) {
var statusClass = status >= 0 ? 'success' : 'error',
statusEl = status >=0 ? self.successEl : self.errorEl;
statusEl.draw( 1 );
// add respective class to the element
classie.addClass( self.el, statusClass );
// after options.statusTime remove status and undraw the respective stroke and enable the button
setTimeout( function() {
classie.remove( self.el, statusClass );
statusEl.draw(0);
self._enable();
}, self.options.statusTime );
}
else {
self._enable();
}
classie.removeClass( self.el, 'loading' );
};
// give it a little time (ideally the same like the transition time) so that the last progress increment animation is still visible.
setTimeout( endLoading, 300 );
}
按鈕完成！

『叄』 maya2012怎麼在場景上方創建一個圓形

打開捕捉工具啊，捕捉到對象傷，創建的時候就可以在物體表面創建了

『肆』 如何在pr中創造一個圓圈

添加字幕層，在字幕面板中繪制圓圈，再將字幕層添加到軌道中即可

『伍』 MCedit無法創造出一個圓

你保存了嗎？
保存可以用Ctrl+S快捷鍵，就在工具欄左邊有提示
如果保存了還沒有那就是可能有bug了

『陸』 上帝是全能的，上帝能不能創造一個圓形的四邊形

可以啊，上帝自己就是一個圓形的四邊形。
說起來上帝和咱不在一個維度上，拜上帝本身沒啥問題，這是個人自由。
但是希望通過拜上帝達到自己什麼目的的人多半不靠譜。

『柒』 cocos2d 怎麼創建一個圓形sprite

游戲嘛，沒圖片沒畫面能叫游戲嗎，所以我們還是先看用quick的方式怎麼創建精靈。
quick的api中對精靈的創建講解得還是很詳細，所以創建起來很簡單。
display.newSprite(filename, x, y, params)
filename：精靈文件名
x：x位置坐標
y：y位置坐標
params：表參數（不常用）
我們創建的時候為了方便，可以添加x，y參數，這樣就不用在後面再設置位置了。此外，對於精靈的文件名，我們在使用cocos2dx的時候，都知道有直接從文件讀取，也有的是從緩存幀中讀取的，所以為了區分，quick在文件名上使用了」＃「來區分它們，帶有」＃「說明該名稱是從緩存幀中讀取。
實踐一下，還是在上節創建的MyScene場景中修改代碼。

『捌』 如何創建一個圓形的Button

你的圓點是什麼圖片還是自己繪制的?bitmap一個bmp，然後每次點擊button事件中，給這個bmp繪制一個圓點(或者將圖片畫上去)，(可以設置變數控制坐標，每次添加圓點後坐標改變，注意不要有重疊)，然後讓你的form的背景設為這個bmp就可以了。

『玖』 數學家為什麼會創造圓

個人覺得不是科學家創造的圓，世界上本來就有圓，只不過是科學家發現了圓並且去研究圓，通過研究圓然後發現了一系列的公式。

『拾』 JAVA作業——創建一個點類，創建一個圓類

import java.util.Arrays;
import java.util.Date;

public class Test {

@SuppressWarnings("deprecation")
public static void main(String args[]) {
System.out.println("problem 1:");
Date[] dates = {
new Date(109, 5, 5),
new Date(105, 1, 1),
new Date(108, 4, 4),
new Date(106, 2, 2),
new Date(107, 3, 3),
};
Arrays.sort(dates);
for (Date date : dates) {
System.out.println(date);
}
System.out.println("problem 2:");
Circle circle1 = new Circle(new Point(1, 1), 1);
System.out.println(circle1);
Circle circle2 = new Circle(2);
System.out.println(circle2);
circle2.setCenter(new Point(2, 2));
System.out.println(circle2);
circle1.setRadius(3);
System.out.println(circle1);
}

}

class Point {
private double x;
private double y;
Point(double x, double y) {
this.x = x;
this.y = y;
}
public String toString() {
return "(" + x + ", " + y + ")";
}
}

class Circle {
private Point center;
private double radius;

public Circle(Point center, double radius) {
this.center = center;
this.radius = Math.max(radius, 0);
}

public Circle(double radius) {
this(new Point(0, 0), radius);
}

public double getArea() {
return Math.PI * radius * radius;
}

public void setCenter(Point center) {
this.center = center;
}

public void setRadius(double radius) {
this.radius = Math.max(radius, 0);
}

public String toString() {
return center + " radius: " + radius
+ " area: " + getArea();
}
}