広島、晴れのち晴れ

【Flutter】SignatureのtoImage()について

&NewLine;<p>手書きを実現させるのに<a href&equals;"https&colon;&sol;&sol;pub&period;dev&sol;packages&sol;signature" target&equals;"&lowbar;blank" rel&equals;"noreferrer noopener">Signature<&sol;a>はとても便利です。本当に感謝!<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>しかしtoImage&lpar;&rpar;メソッドで画像に変換すると見た目と位置が変わってしまいます。<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code>SignatureController contoller &equals; SignatureController&lpar;&rpar;&semi;&NewLine;var image &equals; controller&period;toImage&lpar;&rpar;&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">&NewLine;<figure class&equals;"wp-block-image size-large has-custom-border"><img data-id&equals;"4609" src&equals;"https&colon;&sol;&sol;tico-jpn&period;com&sol;wp&sol;wp-content&sol;uploads&sol;2024&sol;02&sol;toImage1&period;png" alt&equals;"" class&equals;"wp-image-4609" style&equals;"border-width&colon;1px"&sol;><figcaption class&equals;"wp-element-caption">手書き<&sol;figcaption><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large has-custom-border"><img data-id&equals;"4610" src&equals;"https&colon;&sol;&sol;tico-jpn&period;com&sol;wp&sol;wp-content&sol;uploads&sol;2024&sol;02&sol;toImage2&period;png" alt&equals;"" class&equals;"wp-image-4610" style&equals;"border-width&colon;1px"&sol;><figcaption class&equals;"wp-element-caption">画像に変換<&sol;figcaption><&sol;figure>&NewLine;<&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p>サイズを指定しても一緒です。<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code>var image &equals; controller&period;toImage&lpar;width&colon; 300&comma; height&colon; 300&rpar;&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex">&NewLine;<figure class&equals;"wp-block-image size-large has-custom-border"><img data-id&equals;"4611" src&equals;"https&colon;&sol;&sol;tico-jpn&period;com&sol;wp&sol;wp-content&sol;uploads&sol;2024&sol;02&sol;toImage3&period;png" alt&equals;"" class&equals;"wp-image-4611" style&equals;"border-width&colon;1px"&sol;><figcaption class&equals;"wp-element-caption">手書き<&sol;figcaption><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large has-custom-border"><img data-id&equals;"4612" src&equals;"https&colon;&sol;&sol;tico-jpn&period;com&sol;wp&sol;wp-content&sol;uploads&sol;2024&sol;02&sol;toImage4&period;png" alt&equals;"" class&equals;"wp-image-4612" style&equals;"border-width&colon;1px"&sol;><figcaption class&equals;"wp-element-caption">画像に変換<&sol;figcaption><&sol;figure>&NewLine;<&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p>原因はtoImage&lpar;&rpar;が手書き部分の最小矩形で画像化するからだそうです。サイズを指定しても手書きを画像化してから指定のサイズの画像に入れ込むという作業らしいので、上手くいかないらしいです。<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>なので以下のように筆圧0の点を4隅に作ってtoImage&lpar;&rpar;をすると見た目通りの画像になりました。<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code>double width &equals; 300&semi;&NewLine;double height &equals; 300&semi;&NewLine;controller&period;addPoint&lpar;Point&lpar;const Offset&lpar;0&comma; 0&rpar;&comma; PointType&period;tap&comma; 0&rpar;&rpar;&semi; &NewLine;controller&period;addPoint&lpar;Point&lpar;Offset&lpar;0&comma; height&rpar;&comma; PointType&period;tap&comma; 0&rpar;&rpar;&semi; &NewLine;controller&period;addPoint&lpar;Point&lpar;Offset&lpar;width&comma; 0&rpar;&comma; PointType&period;tap&comma; 0&rpar;&rpar;&semi; &NewLine;controller&period;addPoint&lpar;Point&lpar;Offset&lpar;width&comma; height&rpar;&comma; PointType&period;tap&comma; 0&rpar;&rpar;&semi; &NewLine;var image &equals; controller&period;toImage&lpar;&rpar;&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex">&NewLine;<figure class&equals;"wp-block-image size-large has-custom-border"><img data-id&equals;"4614" src&equals;"https&colon;&sol;&sol;tico-jpn&period;com&sol;wp&sol;wp-content&sol;uploads&sol;2024&sol;02&sol;toImage6&period;png" alt&equals;"" class&equals;"wp-image-4614" style&equals;"border-width&colon;1px"&sol;><figcaption class&equals;"wp-element-caption">手書き<&sol;figcaption><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large has-custom-border"><img data-id&equals;"4613" src&equals;"https&colon;&sol;&sol;tico-jpn&period;com&sol;wp&sol;wp-content&sol;uploads&sol;2024&sol;02&sol;toImage5&period;png" alt&equals;"" class&equals;"wp-image-4613" style&equals;"border-width&colon;1px"&sol;><figcaption class&equals;"wp-element-caption">画像に変換<&sol;figcaption><&sol;figure>&NewLine;<&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p>このやり方が良いのか悪いのか分かりませんが、出来た画像が見た目通りなので問題ないと思っています。<&sol;p>&NewLine;

モバイルバージョンを終了