図形外でダブルクリックすると移動出来る様になる
図形以外の領域でダブルクリックすると図形が移動できる様になる。 また、ダブルクリックすると図形の回転ができる様になる。 移動と回転をダブルクリックで切り替える。 JavaScript部分の「イベントのリッスンを開始する( […]
月別: 2015年10月
JavaScriptでSVGのrectを並べて横棒グラフを描画する
カンマ区切りの数値の列（1列のみ）と対応する色を指定するだけで、簡単に横棒グラフが描けます。
CSSのtransformで立体化した図形にonmousemoveすると、どの要素の上に乗っているかを調べる
枠線で囲まれたdiv内にマウスが入った際に、マウス下にある要素名を返します。 （MouseEvent の toElement.localName の値を拾っています） 角錐では側面の三角形を描画するとどうしてもsvg上に […]
立方体をドラック&ドロップで移動する
クリックして回る正六面体をドラック＆ドロップで移動するJavaScriptの例です。 図形上をドラックしながらマウスアウトし、図形以外の領域でドロップするとドロップした時点まで、図形を移動させる。
JavaScriptでSVGのpolygonを生成し、CSSのtransformで多角錐にする
CSSのtransformで多角柱を組み立てる応用で、側面を三角形にすることで角錐をつくっています。高さの指定はcss transformのscaleY()で縦方向に伸び縮みさせることで調整しています。 角数を指定するだ […]
立方体をクリックしながら回す
正六面体上をクリックして回すJavaScriptの例です。
JavaScriptでSVGのpolygonとrectを生成し、CSSのtransformで多角柱にする
Circle上に多角形Polygonを描画すると同等の手法でフタになるポリゴンを生成し、この円を基準に側面rectの位置合わせに利用しています。 角数を指定するだけで3角柱～円柱（ただしとても処理が重たくなる）まで生成で […]
SVGのpolygonで生成した正三角形の回転の中心を比較
SVGのpolygonで正三角形を生成し、その三角形の中心を回転の中心と重ねています。 三角形の中心点の座標(x,y)は(x1+x2+x3)/3 , (y1+y2+y3)/3 で得られるので、polygonを生成する際の […]
JavaScriptからSVGのCSS・Styleを操作して立方体を回転させる
SVGで6枚のパネルを生成し、 transform-style: preserve-3d や transform:rotate()などをCSSで指定し立方体にします。 そこから立方体を含むdivに対して、JavaScri […]
JavaScriptからSVGのCSS・Styleを操作してX,Y,Z軸それぞれに対して回転させる
SVGで生成された3枚のパネルをJavaScriptからCSSのスタイル変化させることでアニメーションさせます。 複数のsvgを重ねて描画するために、svgを含むdivに対して position:relative を、 […]
JavaScript Archives（ジャバスクリプト アーカイブス） 2023 . Powered by WordPress