 ログイン メインメニュー |
| 投稿者 |
スレッド |
| 永井勝則 |
Åê¹ÆNo.43058 投稿日時: 2009-8-1 9:44 |
職人   居住地: 白馬村 投稿: 716
使用環境: Windows 7 :Flash CS4:  10.5.8 :Flash CS4
|
drawRect()をつづけて呼び出して作成したシェイプ 以下のコードを実行すると、中が透明になった黄色い矩形の”枠”が作成できるのですが、何で中が透明になるのでしょうか？ var shape:Shape = new Shape();
var color:uint=0xFFFF00;
shape.graphics.beginFill(color);
shape.graphics.drawRect(0, 0, 200, 200);
shape.graphics.drawRect(20, 20, 160, 160);
shape.graphics.endFill();
addChild(shape);
----------------
永井勝則：
himco.jp :
|
|
|
| ひろゆき |
Åê¹ÆNo.43059 投稿日時: 2009-8-1 9:58 |
ちょんまげら   居住地: 大阪密林 投稿: 3492
使用環境: 10.3.9 Flex 2 SDK   Pro8.0  Pro7.2 FlashPlayer 7.0r24/8.0r24/9.0r115 Safari 1.3.2 Firefox 2.0.0.20 MacOS 9.2.2 Flash 4/5
|
Re: drawRect()をつづけて呼び出して作成したシェイプ drawRect(moveTo+lineTo)で引かれた(囲まれた)線の「内側」を塗っているからではないでしょうか？ var shape:Shape = new Shape();
var color:uint=0xFFFF00;
shape.graphics.lineStyle(1, 0xFF0000);
shape.graphics.beginFill(color);
shape.graphics.drawRect(0, 0, 200, 200);
shape.graphics.drawRect(20, 20, 160, 160);
shape.graphics.endFill();
addChild(shape);
var shape:Shape = new Shape();
var color:uint=0xFFFF00;
shape.graphics.beginFill(color);
shape.graphics.drawRect(0, 0, 200, 200);
shape.graphics.endFill();
shape.graphics.beginFill(color);
shape.graphics.drawRect(20, 20, 160, 160);
shape.graphics.endFill();
addChild(shape);
とすれば、中まで塗れますね。
----------------
質問する際は、回答者に具体的な情報を与えてくださいなのニャ！ 
|
|
|
| 野中文雄 |
Åê¹ÆNo.43060 投稿日時: 2009-8-1 10:11 |
ちょんまげら  居住地: 東京 投稿: 4166
使用環境: CS4 .4.11 Vista Home Premium (SP1)
|
Re: drawRect()をつづけて呼び出して作成したシェイプ パスが合成されるからではないでしょうか。以下のように、明示的に塗りを終えれば、抜けはなくなります。 参考:「 ワインディング規則名」(よくわからない説明ですけど  ) [追記]「 ワインディング規則の定義」を先に読んだ方がよさそうです。 引用：
knagaiさんは書きました：
以下のコードを実行すると、中が透明になった黄色い矩形の”枠”が作成できるのですが、何で中が透明になるのでしょうか？
var shape:Shape = new Shape();
var color:uint=0xFFFF00;
shape.graphics.beginFill(color);
shape.graphics.drawRect(0, 0, 200, 200);
shape.graphics.endFill();
shape.graphics.beginFill(color);
shape.graphics.drawRect(20, 20, 160, 160);
shape.graphics.endFill();
addChild(shape);
----------------
 
|
|
|
| 永井勝則 |
Åê¹ÆNo.43061 投稿日時: 2009-8-1 10:21 |
職人 居住地: 白馬村 投稿: 716
使用環境: Windows 7 :Flash CS4: 10.5.8 :Flash CS4
|
Re: drawRect()をつづけて呼び出して作成したシェイプ お二方、早々のご回答、ありがとうございます。 drawRect(x, y, w,h)は幅w、高さhの矩形を(x, y)座標に作成するメソッドかと思っていたら、 (x, y)にペンを移動させ、x軸の正の方向にw、y軸の正の方向にhだけペンを移動させるメソッドというとらえ方もできるのですかね。 以下を実行すると、”枠線”が描けます。 var shape:Shape = new Shape();
var color:uint=0xFFFF00;
shape.graphics.lineStyle(1, 0xFF0000);
//shape.graphics.beginFill(color);
shape.graphics.drawRect(0, 0, 200, 200);
shape.graphics.drawRect(20, 20, 160, 160);
//shape.graphics.endFill();
addChild(shape);
枠を塗ったり、枠線を描くこのdrawRect()の連続呼び出し（beginFill()、endFill()、lineStyle()の中での）は使えそうなテクニックですね。 --------------- 「ワインディング規則」と言うのですか。 「巻きつけの方向」とでも言うのでしょうか。 全然知りませんでした。 --追記-- ActionScript 3.0オンラインヘルプのdrawPath()の３つめのパラメータ、windingでは"湾曲規則"と書かれています。
----------------
永井勝則：
himco.jp :
|
|
|
| ひろゆき |
Åê¹ÆNo.43062 投稿日時: 2009-8-1 10:23 |
ちょんまげら 居住地: 大阪密林 投稿: 3492
使用環境: 10.3.9 Flex 2 SDK Pro8.0 Pro7.2 FlashPlayer 7.0r24/8.0r24/9.0r115 Safari 1.3.2 Firefox 2.0.0.20 MacOS 9.2.2 Flash 4/5
|
Re: drawRect()をつづけて呼び出して作成したシェイプ 同じことは、moveTo+lineTo でも起きますね。 ちなみに、AS2.0でも、同じだったと思います。 var shape:Shape = new Shape();
shape.graphics.lineStyle(1, 0xFF0000);
shape.graphics.beginFill(0xFFFF00);
shape.graphics.moveTo(0, 0);
shape.graphics.lineTo(0, 200);
shape.graphics.lineTo(200, 200);
shape.graphics.lineTo(200, 0);
shape.graphics.lineTo(0, 0);
shape.graphics.moveTo(20, 20);
shape.graphics.lineTo(20, 180);
shape.graphics.lineTo(180, 180);
shape.graphics.lineTo(180, 20);
shape.graphics.lineTo(20, 20);
shape.graphics.endFill();
addChild(shape);
これでも、同じように塗れます。(描線は異なります) var shape:Shape = new Shape();
shape.graphics.lineStyle(1, 0xFF0000);
shape.graphics.beginFill(0xFFFF00);
shape.graphics.moveTo(0, 0);
shape.graphics.lineTo(0, 200);
shape.graphics.lineTo(200, 200);
shape.graphics.lineTo(200, 0);
shape.graphics.lineTo(0, 0);
shape.graphics.lineTo(20, 20);
shape.graphics.lineTo(20, 180);
shape.graphics.lineTo(180, 180);
shape.graphics.lineTo(180, 20);
shape.graphics.lineTo(20, 20);
shape.graphics.endFill();
addChild(shape);
これを活用すれば、ドーナツ型のシェイプも簡単に描けたりします。 var shape:Shape = new Shape();
shape.graphics.beginFill(0xFFFF00);
shape.graphics.drawCircle(120, 120, 100);
shape.graphics.drawCircle(120, 120, 80);
shape.graphics.endFill();
addChild(shape);
----------------
質問する際は、回答者に具体的な情報を与えてくださいなのニャ！
|
|
|
| 永井勝則 |
Åê¹ÆNo.43063 投稿日時: 2009-8-1 11:51 |
職人 居住地: 白馬村 投稿: 716
使用環境: Windows 7 :Flash CS4: 10.5.8 :Flash CS4
|
Re: drawRect()をつづけて呼び出して作成したシェイプ 野中さんに教えていただいた”ワインディング規則”を読みつつ、 ひろゆきさんのコードをお借りして、 ワインディング規則とやらのサンプルコードを作ってみました。 コードは長いばかりで、結果は、だから何？ではありますが、 何か活用法があるのでしょう（Flash Player 10以降）。 // コマンドのベクター作成
var command:Vector.<int> = new Vector.<int>();
command.push(GraphicsPathCommand.MOVE_TO);
command.push(GraphicsPathCommand.LINE_TO);
command.push(GraphicsPathCommand.LINE_TO);
command.push(GraphicsPathCommand.LINE_TO);
command.push(GraphicsPathCommand.LINE_TO);
command.push(GraphicsPathCommand.MOVE_TO);
command.push(GraphicsPathCommand.LINE_TO);
command.push(GraphicsPathCommand.LINE_TO);
command.push(GraphicsPathCommand.LINE_TO);
command.push(GraphicsPathCommand.LINE_TO);
// moveTo()とlineTo()で使用する座標のデータのベクター
var data1:Vector.<Number> = new Vector.<Number>();
// 正のワインディング（時計回り）
data1.push(0,0);
data1.push(0,200);
data1.push(200,200);
data1.push(200,0);
data1.push(0,0);
// 正のワインディング（時計回り）
data1.push(20,20);
data1.push(20,180);
data1.push(180,180);
data1.push(180,20);
data1.push(20,20);
/*
// 負のワインディング（反時計回り）
data1.push(20,20);
data1.push(180,20);
data1.push(180,180);
data1.push(20,180);
data1.push(20,20);
*/
// やっと作成開始
var shape:Shape = new Shape();
shape.graphics.lineStyle(1, 0xFF0000);
shape.graphics.beginFill(0xFFFF00);
// これまでの描画
//shape.graphics.drawPath(command, data1, GraphicsPathWinding.EVEN_ODD);
// Flash Player 10からは”ワインディング規則”に”非ゼロ”が指定できる
shape.graphics.drawPath(command, data1, GraphicsPathWinding.NON_ZERO);
shape.graphics.endFill();
addChild(shape);
----------------
永井勝則：
himco.jp :
|
|
|
|
 |
ホーム
フォーラム
最新の投稿一覧
ニュース
メイン