{"id":2109,"date":"2023-07-24T00:00:00","date_gmt":"2023-07-23T15:00:00","guid":{"rendered":"https:\/\/www.ishikawasekkei.com\/?p=2109"},"modified":"2023-07-29T23:51:51","modified_gmt":"2023-07-29T14:51:51","slug":"konva-event","status":"publish","type":"post","link":"https:\/\/www.ishikawasekkei.com\/index.php\/2023\/07\/24\/konva-event\/","title":{"rendered":"KONVA \u30a4\u30d9\u30f3\u30c8\u306e\u5b9f\u884c\u9806\u5e8f\u8abf\u67fb\uff01"},"content":{"rendered":"\n<p>\u3053\u3093\u306b\u3061\u306f\u3002\u77f3\u5ddd\u3055\u3093\u3067\u3059\u3002<br>KONVA\u3092\u4f7f\u3063\u3066TM\u306e\u304a\u7d75\u304b\u304d\u30c4\u30fc\u30eb\u3092\u4f5c\u3063\u3066\u3044\u307e\u3059\u3002\u3057\u304b\u3057\u3001\u30a4\u30d9\u30f3\u30c8\u306e\u51e6\u7406\u9806\u5e8f\u304c\u3088\u304f\u5206\u304b\u3089\u306a\u304f\u306a\u3063\u3066\u304d\u307e\u3057\u305f\u306e\u3067\u3001\u5b9f\u969b\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u691c\u8a3c\u3057\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3059\u3002\u305b\u3063\u304b\u304f\u306a\u306e\u3067\u3001\u7686\u3055\u3093\u306b\u3082\u7d50\u679c\u3092\u516c\u958b\u3057\u307e\u3059\uff01\uff08\u5fc5\u8981\u306a\u3072\u3068\u3001\u6ec5\u591a\u306b\u3044\u306a\u3044\u3068\u601d\u3044\u307e\u3059\u304c\uff01(\u7b11)\uff09<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30a4\u30d9\u30f3\u30c8\u4e00\u89a7<\/h2>\n\n\n\n<p><a href=\"https:\/\/konvajs.org\/docs\/index.html\" target=\"_blank\" rel=\"noopener\" title=\"\">KONVA\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u30b5\u30a4\u30c8<\/a>\u306e\u4e2d\u306b\u3042\u308b\u30a4\u30d9\u30f3\u30c8\u306b\u95a2\u3059\u308b\u8a18\u4e8b\u304b\u3089\u30a4\u30d9\u30f3\u30c8\u3092\u629c\u304d\u51fa\u3057\u307e\u3057\u305f\u3002\uff08\u5de6\u5074\u306b\u300cEVENTS\u300d\u3068\u66f8\u3044\u3066\u3042\u308b\u3068\u3053\u308d\u306b\u3042\u308b\u8a18\u4e8b\u3067\u3059\u3002\uff09\u305d\u3057\u3066\u3001\u305d\u308c\u305e\u308c\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u6bce\u306b\u3069\u306e\u3088\u3046\u306a\u9806\u756a\u3067\u5b9f\u884c\u3055\u308c\u308b\u306e\u304b\u3001\u51fa\u529b\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-small-font-size\">\u3010\u30de\u30a6\u30b9\u30a4\u30d9\u30f3\u30c8\u3011<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>mouseover<\/li>\n\n\n\n<li>mouseout<\/li>\n\n\n\n<li>mouseenter<\/li>\n\n\n\n<li>mouseleave<\/li>\n\n\n\n<li>mousemove<\/li>\n\n\n\n<li>mousedown<\/li>\n\n\n\n<li>mouseup<\/li>\n\n\n\n<li>wheel<\/li>\n\n\n\n<li>click<\/li>\n\n\n\n<li>dblclick<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-small-font-size\">\u3010\u30bf\u30c3\u30c1\u30a4\u30d9\u30f3\u30c8\u3011<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>touchstart<\/li>\n\n\n\n<li>touchmove<\/li>\n\n\n\n<li>touchend<\/li>\n\n\n\n<li>tap<\/li>\n\n\n\n<li>dbltap<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-small-font-size\">\u3010\u30dd\u30a4\u30f3\u30bf\u30fc\u30a4\u30d9\u30f3\u30c8\u3011<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>pointerdown<\/li>\n\n\n\n<li>pointermove<\/li>\n\n\n\n<li>pointereup<\/li>\n\n\n\n<li>pointercancel<\/li>\n\n\n\n<li>pointerover<\/li>\n\n\n\n<li>pointerenter<\/li>\n\n\n\n<li>pointerout<\/li>\n\n\n\n<li>pointerleave<\/li>\n\n\n\n<li>pointerclick<\/li>\n\n\n\n<li>pointerdblclick<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-small-font-size\">\u3010\u30c9\u30e9\u30c3\u30b0\u30a4\u30d9\u30f3\u30c8\u3011<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>dragstart<\/li>\n\n\n\n<li>dragmove<\/li>\n\n\n\n<li>dragend<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-small-font-size\">\u3010\u30c8\u30e9\u30f3\u30b9\u30d5\u30a9\u30fc\u30e0\u30a4\u30d9\u30f3\u30c8\u3011<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>transformstart<\/li>\n\n\n\n<li>transform<\/li>\n\n\n\n<li>transformend<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b9f\u9a13\u3067\u3059<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.ishikawasekkei.com\/index.php\/2023\/03\/03\/first-javascript\/\" target=\"_blank\" rel=\"noopener\" title=\"\">\u5148\u65e5\u304a\u8a66\u3057\u3067javascript\u3092\u7d44\u307f\u8fbc\u3093\u3067\u307f\u307e\u3057\u305f<\/a>\u304c\u3001\u4eca\u56de\u3082\u305d\u308c\u3067\u8a66\u3057\u3066\u307f\u307e\u3059\uff01<\/p>\n\n\n\n<script src=\"https:\/\/unpkg.com\/konva@9.2.0\/konva.min.js\"><\/script>\n<div id=\"container20230724\"><\/div>\n<script>\n  function writeMessage(message) {\n    let lines = text.text().split(\"\\n\");\n    lines.splice(0, lines.length - 10);\n    if(lines[lines.length - 1].indexOf(message) == -1) {\n      lines.push(message);\n    } else {\n      lines[lines.length - 1] = lines[lines.length - 1] + \".\"\n    }\n    text.text(lines.join(\"\\n\"));\n  }\n\n  var stage = new Konva.Stage({\n    container: 'container20230724',\n    width: window.innerWidth,\n    height: 500\/*window.innerHeight*\/,\n  });\n\n  var layer = new Konva.Layer();\n\n  var text = new Konva.Text({\n    x: 10,\n    y: 200,\n    fontFamily: 'Calibri',\n    fontSize: 24,\n    text: '',\n    fill: 'black',\n  });\n\n  var triangle = new Konva.RegularPolygon({\n    x: 280,\n    y: 120,\n    sides: 3,\n    radius: 80,\n    fill: '#00D2FF',\n    stroke: 'black',\n    strokeWidth: 4,\n    draggable: false,\n  });\n\n  var circle = new Konva.Circle({\n    x: 430,\n    y: 100,\n    radius: 60,\n    fill: 'red',\n    stroke: 'black',\n    strokeWidth: 4,\n    draggable: true,\n  });\n\n  const KEVENTS = [{\n  eventName:'MouseEvents',\n      event:['mouseover','mouseout','mouseenter','mouseleave','mousemove',\n             'mousedown','mouseup','wheel','click','dblclick',]\n  },{\n  eventName:'TouchEvents',\n      event:['touchstart','touchmove','touchend','tap','dbltap',],\n  },{\n  eventName:'PointerEvents',\n      event:['pointerdown','pointermove','pointereup','pointercancel','pointerover',\n             'pointerenter','pointerout','pointerleave','pointerclick','pointerdblclick',],\n  },{\n  eventName:'DragEvents',\n      event:['dragstart','dragmove','dragend',],\n  },{\n  eventName:'TransferEvent',\n      event:['transformstart','transform','transformend',],\n  }\n  ]\n\n  for(const e1 of KEVENTS) {\n    for(const e2 of e1.event){\n      stage.on(e2, (event) => { writeMessage(e1.eventName + \" Stage \" + e2); })\n      triangle.on(e2, (event) => { writeMessage(e1.eventName + \" Triangle \" + e2); });\n      circle.on(e2, (event) => { writeMessage(e1.eventName + \" Circle \" + e2); });\n    }\n  }\n\n  layer.add(text);\n  layer.add(triangle);\n  layer.add(circle);\n\n  \/\/ add the layer to the stage\n  stage.add(layer);\n<\/script>\n\n\n\n<p>\u8d64\u3044\u4e38\u306f\u30c9\u30e9\u30c3\u30b0\u53ef\u80fd\u3067\u3059\u3002\u3044\u308d\u3093\u306a\u30a4\u30d9\u30f3\u30c8\u3092\u8a66\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script src=\"https:\/\/unpkg.com\/konva@9.2.0\/konva.min.js\">&lt;\/script>\n&lt;div id=\"container20230724\">&lt;\/div>\n&lt;script>\n  function writeMessage(message) {\n    let lines = text.text().split(\"\\n\");\n    lines.splice(0, lines.length - 10);\n    if(lines[lines.length - 1].indexOf(message) == -1) {\n      lines.push(message);\n    } else {\n      lines[lines.length - 1] = lines[lines.length - 1] + \".\"\n    }\n    text.text(lines.join(\"\\n\"));\n  }\n\n  var stage = new Konva.Stage({\n    container: 'container20230724',\n    width: window.innerWidth,\n    height: 500\/*window.innerHeight*\/,\n  });\n\n  var layer = new Konva.Layer();\n\n  var text = new Konva.Text({\n    x: 10,\n    y: 200,\n    fontFamily: 'Calibri',\n    fontSize: 24,\n    text: '',\n    fill: 'black',\n  });\n\n  var triangle = new Konva.RegularPolygon({\n    x: 280,\n    y: 120,\n    sides: 3,\n    radius: 80,\n    fill: '#00D2FF',\n    stroke: 'black',\n    strokeWidth: 4,\n    draggable: false,\n  });\n\n  var circle = new Konva.Circle({\n    x: 430,\n    y: 100,\n    radius: 60,\n    fill: 'red',\n    stroke: 'black',\n    strokeWidth: 4,\n    draggable: true,\n  });\n\n  const KEVENTS = [{\n  eventName:'MouseEvents',\n      event:['mouseover','mouseout','mouseenter','mouseleave','mousemove',\n             'mousedown','mouseup','wheel','click','dblclick',]\n  },{\n  eventName:'TouchEvents',\n      event:['touchstart','touchmove','touchend','tap','dbltap',],\n  },{\n  eventName:'PointerEvents',\n      event:['pointerdown','pointermove','pointereup','pointercancel','pointerover',\n             'pointerenter','pointerout','pointerleave','pointerclick','pointerdblclick',],\n  },{\n  eventName:'DragEvents',\n      event:['dragstart','dragmove','dragend',],\n  },{\n  eventName:'TransferEvent',\n      event:['transformstart','transform','transformend',],\n  }\n  ]\n\n  for(const e1 of KEVENTS) {\n    for(const e2 of e1.event){\n      stage.on(e2, (event) => { writeMessage(e1.eventName + \" Stage \" + e2); })\n      triangle.on(e2, (event) => { writeMessage(e1.eventName + \" Triangle \" + e2); });\n      circle.on(e2, (event) => { writeMessage(e1.eventName + \" Circle \" + e2); });\n    }\n  }\n\n  layer.add(text);\n  layer.add(triangle);\n  layer.add(circle);\n\n  \/\/ add the layer to the stage\n  stage.add(layer);\n&lt;\/script><\/pre>\n\n\n\n<p>\u30b9\u30c6\u30fc\u30b8\u3068\u4e09\u89d2\u3068\u4e38\u3068\u30c6\u30ad\u30b9\u30c8\u3092\u3064\u304f\u3063\u3066\u3001\u30c6\u30ad\u30b9\u30c8\u4ee5\u5916\u306e\u305d\u308c\u305e\u308c\u306b\u30a4\u30d9\u30f3\u30c8\u3092\u767b\u9332\u3057\u307e\u3057\u305f\u3002\u30c6\u30ad\u30b9\u30c8\u306f\u30a4\u30d9\u30f3\u30c8\u5185\u5bb9\u306e\u51fa\u529b\u7528\u3067\u3059\u3002\u4e38\u306f\u30c9\u30e9\u30c3\u30b0\u53ef\u80fd\u3001\u25b2\u306f\u30c9\u30e9\u30c3\u30b0\u4e0d\u53ef\u80fd\u306b\u30bb\u30c3\u30c8\u3057\u3066\u3001\u305d\u308c\u305e\u308c\u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u3068\u304d\u306b\u3001\u767a\u751f\u3057\u305f\u30a4\u30d9\u30f3\u30c8\u3092\u30c6\u30ad\u30b9\u30c8\u306b\u51fa\u529b\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p>\u30a4\u30d9\u30f3\u30c8\u3001\u305f\u304f\u3055\u3093\u3042\u308a\u307e\u3059\u306d\uff01\u305f\u304f\u3055\u3093\u3042\u308a\u3059\u304e\u3066\u3001\u52d5\u304b\u3057\u3066\u3044\u304f\u3068\u8a33\u304c\u5206\u304b\u308a\u307e\u305b\u3093\u3002\u305d\u306e\u3046\u3061\u3001\u30a4\u30d9\u30f3\u30c8\u3092\u30aa\u30d5\u306b\u3059\u308b\u6a5f\u80fd\u3082\u8ffd\u52a0\u3057\u3066\u308f\u304b\u308a\u3084\u3059\u304f\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002\u2192\u3068\u3001\u601d\u3063\u3066\u8272\u3005\u3068\u3084\u3063\u3066\u307f\u307e\u3057\u305f\u304c\u3001HTML\u8981\u7d20\u3092\u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u8ffd\u52a0\u3059\u308b\u3068\u3046\u307e\u304f\u8868\u793a\u3092\u5236\u5fa1\u3067\u304d\u306a\u304b\u3063\u305f\u306e\u3067\u3001\u3044\u3063\u305f\u3093\u8ae6\u3081\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\u3002\u77f3\u5ddd\u3055\u3093\u3067\u3059\u3002KONVA\u3092\u4f7f\u3063\u3066TM\u306e\u304a\u7d75\u304b\u304d\u30c4\u30fc\u30eb\u3092\u4f5c\u3063\u3066\u3044\u307e\u3059\u3002\u3057\u304b\u3057\u3001\u30a4\u30d9\u30f3\u30c8\u306e\u51e6\u7406\u9806\u5e8f\u304c\u3088\u304f\u5206\u304b\u3089\u306a\u304f\u306a\u3063\u3066\u304d\u307e\u3057\u305f\u306e\u3067\u3001\u5b9f\u969b\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u691c\u8a3c\u3057\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3059\u3002\u305b\u3063\u304b\u304f\u306a\u306e\u3067\u3001\u7686\u3055\u3093\u306b\u3082\u7d50\u679c\u3092\u516c &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.ishikawasekkei.com\/index.php\/2023\/07\/24\/konva-event\/\" class=\"more-link\"><span class=\"screen-reader-text\">&#8220;KONVA \u30a4\u30d9\u30f3\u30c8\u306e\u5b9f\u884c\u9806\u5e8f\u8abf\u67fb\uff01&#8221; \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,2],"tags":[],"class_list":["post-2109","post","type-post","status-publish","format-standard","hentry","category-program","category-blog"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/posts\/2109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/comments?post=2109"}],"version-history":[{"count":19,"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/posts\/2109\/revisions"}],"predecessor-version":[{"id":2151,"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/posts\/2109\/revisions\/2151"}],"wp:attachment":[{"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/media?parent=2109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/categories?post=2109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/tags?post=2109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}