イメージビューでの表示位置のずれ

質問

iOS8, xcode 6 の初心者です。
storyboard 上で単純な横棒（黒棒のイメージ）を配置し
ある測定値の値によって、０～１まで長さを変化表示させようとしています。

@property (weak, nonatomic) IBOutlet UIImageView *x1;

　self.x1.layer.anchorPoint= CGPointMake(0,0);　にて
縮小、拡大時の起点を決め、

self.x1.transform = CGAffineTransformMakeScale(0, 0);　によって
何も表示されない状態に初期化したのち

self.x1.transform = CGAffineTransformMakeScale(angle_ratio, 1);　によって
angle_ratio　に基づいた、比率の長さを表示させようとしているのですが、
横方向に数十ポイント、ずれて描画されてしまいます。

どなたか、ご教示頂けますでしょうか。
宜しくお願い致します。

p.s. Autolayout ははずしております。

回答No.4

Lchan0211b · ベストアンサー

No.1です。

「何も表示されない（真っ白のまま）」ということになると
そもそも、そのx1,y1は黒の背景色かあるいは黒のイメージを
設定しているのか?今回のコードなしで、初期状態から黒いバー
を表示するようにした場合、ちゃんと表示されるのか?
そして、どんなコードを追加した段階で表示されなくなるのか?
ということを確認すべきだと思います。

今回質問されたコードは断片的なものなので、それ以上コメントできません。
もしわからないようなら、質問と関係ない部分をできるだけ省いた上で
問題動作が再現するソースコード全体を補足に貼り付けてもらい、
期待する動作を書いてもらえば、何かアドバイスできるかもしれません。
もしかすると、質問と関係ない部分を省いていく過程で、なにか自分で
気付くかもしれません。

お礼

回答、ありがとうございます。
今回の問題を考えていく中で、様々な情報を得ることができました。
もう一度、基本に返って、勉強していきたいと思います。
伸展ありましたら、ご報告いたしたいと思います。
今後とも、宜しくお願い致します。
ありがとうございました。

回答No.3

Lchan0211b

No.1です。

> ただ、私のしたかったのは、ピラミッドグラフ（人口統計にあるような）のように
> 縦のセンターラインを　真ん中にして、左右にふれるような（右部分がｘ変数、左部分がｙ変数）
> イメージでした。

angleとangle_ratioの意味がよくわかっていませんが、
angle_ratioのとり得る値は0～1.0で、
angleが正の時にセンターライン(x=100)より右にx1をangle_ratio*100ピクセル分伸ばし、
angleが負の時にセンターライン(x=100)より左にy1をangle_ratio*100ピクセル分伸ばす
ということであれば、

if (angle >= 0) {
self.x1.frame = CGRectMake(100, 0, 100*angle_ratio, 10);
self.y1.frame = CGRectMake(100, 0, 0, 10);
} else {
self.x1.frame = CGRectMake(100, 0, 0, 10);
self.y1.frame = CGRectMake(100 - 100*angle_ratio, 0, angle_ratio*100, 10);
}

とすべきじゃないでしょうか?
transformを操作する必要はないと思います。

お礼

回答、ありがとうございます。
何度もすみません。

教えて頂いた、

if (angle >= 0) {
self.x1.frame = CGRectMake(100, 0, 100*angle_ratio, 10);
self.y1.frame = CGRectMake(100, 0, 0, 10);
} else {
self.x1.frame = CGRectMake(100, 0, 0, 10);
self.y1.frame = CGRectMake(100 - 100*angle_ratio, 0, angle_ratio*100, 10);
}

では、何も表示されない（真っ白のまま）ので
（たぶん、私のどこかの設定の間違い）
苦肉の策として、x1という黒バーの入っているイメージビューの
原点（たぶん左上）を求め

x1_x=CGRectGetMinX(self.x1.frame);
x1_y=CGRectGetMinY(self.x1.frame);

値が代入されているのは、デバッガで確認しました。

この値を下記に代入したのですが、何も表示されません。
case 1:
if (angle == 0 )
{self.x1.frame = CGRectMake (x1_x, x1_y, 0, 0);
self.y1.frame = CGRectMake (y1_x, y1_y, 0, 0); }
else if (angle > 0 ){
→ self.x1.frame = CGRectMake (x1_x, x1_y, 100 * angle_ratio, 10);
// self.x1.image =[UIImage imageNamed:@"angle_bar.png"];
}
// else if (angle < 0){self.y1.frame = CGRectMake (100 -100 * angle_ratio , 0, 100, 10 );}
break;

→の部分を通っているのは、デバッガで確認しました。

Transformを使った下の部分では、黒バーが表示されています。
case 2:
if (angle == 0 )
{self.x2.transform = CGAffineTransformMakeScale(0, 1);
self.y2.transform = CGAffineTransformMakeScale(0, 1); }
else if (angle > 0 ){self.x2.transform = CGAffineTransformMakeScale(angle_ratio, 1);}
else if (angle < 0){self.y2.transform = CGAffineTransformMakeScale(-angle_ratio, 1);}
break;

不思議です。　お時間あるときにご助言頂ければ幸いです。
宜しくお願い致します。

回答No.2

Lchan0211b

No.1です。

すみません。念のため訂正です。

> anchorPoint.xを0にするとともにposition.xを0にすれば、

position.xは0ではなく、イメージビューのフレーム開始位置です。

そもそも、ややこしいlayerを操作しなくても
イメージビューのフレーム幅を調整するだけでいいのではないか
という気もします。

回答No.1

Lchan0211b

> 横方向に数十ポイント、ずれて描画されてしまいます。

http://d.hatena.ne.jp/shobonengine/20110517/1305618891
が参考になると思いますが、anchorPointというのは、
layer内のどの位置ををpositionに合わせるかという指定です。
positionのデフォルトは、viewの中心位置になっていますから
positionを変えずにanchorPoint.xを0にすると、中心から右に
延びるように表示されるはずです。
anchorPoint.xを0にするとともにposition.xを0にすれば、
おそらくあなたが意図している表示になると思います。

お礼

回答、ありがとうございます。
おっしゃるとおり、 self.x1.layer.anchorPoint= CGPointMake(0,0); をやめ
self.x1.transform = CGAffineTransformMakeScale(angle_ratio, 1);　のみにしたところ、
それぞれのバーの中心点を起点にして、左右に広がるバーになりました。

ただ、私のしたかったのは、ピラミッドグラフ（人口統計にあるような）のように
縦のセンターラインを　真ん中にして、左右にふれるような（右部分がｘ変数、左部分がｙ変数）
イメージでした。

＞そもそも、ややこしいlayerを操作しなくても
＞イメージビューのフレーム幅を調整するだけでいいのではないか
＞という気もします。

こういう手もあったかと思い、

case 1:
if (angle == 0 )
{self.x1.frame = CGRectMake (0, 0, 0, 0);
self.y1.frame = CGRectMake (0, 0, 0, 0); }
else if (angle > 0 ){self.x1.frame = CGRectMake (0, 0, 100 * angle_ratio, 10);}
else if (angle < 0){self.y1.frame = CGRectMake (100 -100 * angle_ratio , 0, 100, 10 );}
break;

としてみましたが、希望の表示がされず、座標系か何か違うのかと思い、

バーを引く前に、縦のセンターラインに合わせるべく
あらかじめ、左右に寄っている分を調整しようと→のようにしてみましたが、これでも駄目で
xcode の手強さに参っております。

case 1:
if (angle == 0 )
{self.x1.transform = CGAffineTransformMakeScale(0, 1);
self.y1.transform = CGAffineTransformMakeScale(0, 1); }
else if (angle > 0 ){self.x1.transform = CGAffineTransformMakeScale(angle_ratio, 1);
→ self.x1.transform = CGAffineTransformMakeTranslation(-(100 - (100 * angle_ratio))/100, 0);}

else if (angle < 0){self.y1.transform = CGAffineTransformMakeScale(-angle_ratio, 1);}
break;

もし、お時間のあるときにでも、ご教示頂けたら、幸いです。

宜しくお願い致します。