Snow Monkey BlocksのSectionの傾斜、逆方向が欲しい

  • このトピックには6件の返信、2人の参加者があり、最後にHatsukiにより10ヶ月、 1週前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #39167
    Hatsuki
    閲覧者
    5

    今の傾斜は左のほうが右より高い斜めになる形ですが、左のほうが右より低くなる形も欲しいなと思う時が無いかなと。

    SVGを反対に計算すれば出来ると思いますし、「向きを逆にする」オプションを追加して切り替えれば良いかなと考えてますが、どうでしょう?

    0
    #39302
    キタジマ タカシ
    キーマスター
    339

    「逆にする」というのはあんまり好みじゃないので、(できるかはわかりませんが)レベルを現状の「0〜100」から「-100〜100」にして、マイナスにスライドさせると逆方向に傾斜がかかるようにしたいなーと思いました。波もしかり。カーブと三角はどうするか迷いますが…。

    0
    #39305
    Hatsuki
    閲覧者
    5

    なるほど。
    マイナス値になっている時にattributeの値から補正して計算し、逆方向にする…でいけそうっすね。

    波もしかり。カーブと三角はどうするか迷いますが…。

    んー、なら試してみて微妙なのは削る形で一度使用感を試してからリリースする方が良いと思うし、全部やったのを今週中にこちらでプルリクするって感じでも良いっすかね。(やり方わかってるし)

    0
    #39309
    キタジマ タカシ
    キーマスター
    339

    カーブはまだ反転させてもおかしくない(svg は別物をつくらないといけないかな)かもですが、三角はちょっと同しようもない気がしますね…。

    んー、なら試してみて微妙なのは削る形で一度使用感を試してからリリースする方が良いと思うし、全部やったのを今週中にこちらでプルリクするって感じでも良いっすかね。(やり方わかってるし)

    まじですか!それはとても助かります。

    0
    #40124
    Hatsuki
    閲覧者
    5

    うーん…傾斜以外要らない気がする(笑)

    三角はちょっと同しようもない気がしますね…。

    タイポも、どうしようもない気がしますね…。

    三角はマイナス値の際にpathを大きく変えればやりようがありますが、使い道がどうしようもない気がします。
    波も上下反対にする意味が無いように見えますんでやる意味が無いと言うか。

    それに、カーブで試していたんですが、タイトル部分にめり込むんでその辺の調整も必要かも。
    三角とか全部、-100から100までをRangeできるようになるのもどうしようかと思うのでその辺考えないとですねー…。
    傾斜(逆方向)を新しく追加する方が早いかも?

    一応、カーブと傾斜の計算のだけ置いときます。

    
    	const renderTiltDivider = () => {
    		if ( 0 > level ) {
    			return (
    				<path
    					d={ <code>m100,${ 100 + level } L100,100 L0,100 z</code> }
    					strokeWidth="0"
    					fill={ color }
    				/>
    			);
    		}
    		return (
    			<path
    				d={ <code>m0,${ 100 - level } L100,100 L0,100 z</code> }
    				strokeWidth="0"
    				fill={ color }
    			/>
    		);
    	};
    
    	const renderCurveDivider = () => {
    		if ( 0 > level ) {
    			return (
    				<path
    					d={ <code>m0,100 L100,100 Q50,${ level * 2 + 100 },0,100 z</code> }
    					strokeWidth="0"
    					fill={ color }
    				/>
    			);
    		}
    		return (
    			<path
    				d={ <code>m0,${ 100 - level } q50,${ level * 2 },100,0 V100 L0,100 z</code> }
    				strokeWidth="0"
    				fill={ color }
    			/>
    		);
    	};
    

    なんか、一部codeタグに変換されるorz
    適当に脳内変換して読み取ってくださいな。

    0
    #40894
    キタジマ タカシ
    キーマスター
    339

    コードありがとうございます!

    Snow Monkey Blocks v7.2.0 で対応したのでご確認おねがいします!

    0
    #41349
    Hatsuki
    閲覧者
    5

    確認しました。ご対応ありがとうございます。
    タイトル文字列とのレイアウト幅もいい感じに調整されているので、使いやすいです。
    波も上下の位置がより変わる事で、ふわふわ感も出るようになりましたね(笑)

    トピック閉じます。

    0
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「Snow Monkey BlocksのSectionの傾斜、逆方向が欲しい」には新しい返信をつけることはできません。