https://www.jkawamoto.info/tags/ja-coffeescript/ Recent content in ja-CoffeeScript on Junpei Kawamoto Hugo -- gohugo.io en-us junpei.kawamoto@acm.org (Junpei Kawamoto) junpei.kawamoto@acm.org (Junpei Kawamoto) © 2016-2017 Junpei Kawamoto Fri, 05 Jun 2015 00:00:00 +0000 https://www.jkawamoto.info/blog-ja/google-map-api-from-react/ Fri, 05 Jun 2015 00:00:00 +0000 junpei.kawamoto@acm.org (Junpei Kawamoto) https://www.jkawamoto.info/blog-ja/google-map-api-from-react/ 本稿は Qiita 投稿記事 のバックアップです． はじめに React が面白いので，Google Map を使っているアプリも React ベースに移行しようと思った．予想通り，既にライブラリ react-google-maps があって，これを使えば良いのだけれど，どうもオーバースペックな感じがする．そこで簡易コンポーネントを作った． ソースコード Map コンポーネントのソースコードです．よりによって Coffee-React です． Map = React.createClass propTypes: height: React.PropTypes.number.isRequired lat: React.PropTypes.number.isRequired lng: React.PropTypes.number.isRequired getInitialState: -> map: null mousemove_listener: null touchmove_listener: null componentDidMount: -> map = new google.maps.Map React.findDOMNode(@), center: new google.maps.LatLng(@props.lat, @props.lng) zoom: 15 mapTypeId: google.maps.MapTypeId.ROADMAP if "onmousedown" of window # Use mouse events @setState mousemove_listener: google.maps.event.addListener map, "mousemove", (e) => @handleMouseMove e if "ontouchstart" of window # Use touch events @setState touchmove_listener: google. https://www.jkawamoto.info/blog-ja/convert-svg-to-png/ Wed, 10 Dec 2014 00:00:00 +0000 junpei.kawamoto@acm.org (Junpei Kawamoto) https://www.jkawamoto.info/blog-ja/convert-svg-to-png/ 本稿は Qiita 投稿記事 のバックアップです． はじめに D3.js で作成した svg 要素を png 形式の画像に変換する方法． 注意事項として，svg 要素の大きさ (width と height) が絶対値で指定されてないといけない （つまり 100% などでは駄目）． また、テキスト要素にフォントを指定する必要がある． フォントの指定の例 obj.attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("fill", "black") 実際の変換 方針は，svg 要素の中身をデータ URI スキームで表し，canvas 要素に読み込ませる． // #svg1: ターゲットの svg 要素 var width = $("#svg1").width() var height = $("#svg1").height() $("body").append("<canvas id='canvas1' class='hidden' width=" + width + " height=" + height +"></canvas>") var canvas = $("#canvas1")[0] var ctx = canvas.