SlideShare a Scribd company logo

javascript Model- Render & canvas sample

1 of 8
Download to read offline
S53

#3
3-1 MVC, Model - Render
3-2 Canvas
3-3 Model
3-4 Render
3-5 Child
3-6 Event

2012.10.31 20:30 ~ 22:30
Model, View, Controller   Model - Render
         Model                     Model
  Data, Business Logic      Data, Business Logic


                                  Render
       Controller
    Handler, Adapter

                                   View
          View                   Controller
       UI, Present
Canvas #1
                     PixelMap

            Array = [r,g,b,a, r,g,b,a, ...]

            context.fillRect( 0, 0, 2, 1 );

             [0,0,0,0xff, 0,0,0,0xff, ...]

               context.lineTo( 2, 0 );
                 context.stroke();

             [0,0,0,0xff, 0,0,0,0xff, ...]
Canvas #2
    State 1                               State 2                               State 3
  lineWidth                             lineWidth                             lineWidth
    lineCap     context.save()            lineCap     context.save()            lineCap
 strokeStyle                           strokeStyle                           strokeStyle
    fillStyle                             fillStyle                             fillStyle
       font                                  font                                  font
textBaseline                          textBaseline                          textBaseline
   textAlign                             textAlign                             textAlign
   translate                             translate                             translate
                  context.restore()                     context.restore()
         .                                     .                                     .
         .                                     .                                     .
         .                                     .                                     .
Model
          Canvas                                             Children
           context                    child 1             child 2                     child 3
                                       state               state                       state
        width, height                                                                                       ...
                                       draw                draw                        draw
          isUpdated                     etc                 etc                         etc

function Model( $width, $height ){                    Model.prototype.update = function(){
       var canvas, context;                                   this.isUpdated = false;
       canvas = document.createElement( 'canvas' );   };
       canvas.width = $width;                         Model.prototype.setSize = function( $width, $height ){
       canvas.height = $height;                               this.canvas.width = this.width = $width;
       context = canvas.getContext( '2d' );                   this.canvas.height = this.height = $height;
       this.canvas = canvas;                          };
       this.width = $width;                           Model.prototype.addChild = function( $child ){
       this.height = $height;                                 $child.parent = this;
       this.context = context;                                this.children.push( $child );
       this.children = [];                            };
       this.isUpdated = true;                         Model.prototype.removeChild = function( $child ){
}                                                       this.children.splice( this.children.indexOf( $child ), 1 );
                                                      };
                                                      Model.prototype.getIndex = function( $child ){
var model = new Model( 500, 500 );                            return this.children.indexOf( $child );
var stage = document.getElementById('stage');         };
stage.appendChild( model.canvas );                    Model.prototype.swapIndex = function( $from, $to ){
                                                        var to = this.children[$to];
model.addChild( new Child(...) );                       this.children[$to] = this.children[$from];
                                                        this.children[$from] = to;
setInterval( model.render, 17 );                      }
Render

             ! isUpdated
                                     Model.prototype.render = function(){
         context.clearRect();          var i, j;
                                       if( this.isUpdated ) return;
           Loop Children               this.context.clearRect( 0, 0, this.width, this.height );
                                       for( i = 0, j = this.children.length ; i < j ; i++ ){
           context.save();               this.context.save();
                                         this.children[i].render( this.context );
    children[i].render( context );       this.context.restore();
                                       }
          context.restore();           this.isUpdated = true;
                                     }

          isUpdated = true;

Recommended

究極のコントローラを目指す
究極のコントローラを目指す究極のコントローラを目指す
究極のコントローラを目指すYasuo Harada
 
Fabric.js @ Falsy Values
Fabric.js @ Falsy ValuesFabric.js @ Falsy Values
Fabric.js @ Falsy ValuesJuriy Zaytsev
 
Beautiful Development ブレイクスルー体験記
Beautiful Development ブレイクスルー体験記Beautiful Development ブレイクスルー体験記
Beautiful Development ブレイクスルー体験記kentaro watanabe
 
FrOScamp Zurich: Introducing JCR - 2010
FrOScamp Zurich: Introducing JCR - 2010FrOScamp Zurich: Introducing JCR - 2010
FrOScamp Zurich: Introducing JCR - 2010David Nuescheler
 
"Coffee Script" in Brief
"Coffee Script" in Brief"Coffee Script" in Brief
"Coffee Script" in BriefNat Weerawan
 

More Related Content

Similar to javascript Model- Render & canvas sample

The Canvas API for Rubyists
The Canvas API for RubyistsThe Canvas API for Rubyists
The Canvas API for Rubyistsdeanhudson
 
Jython: Python para la plataforma Java (EL2009)
Jython: Python para la plataforma Java (EL2009)Jython: Python para la plataforma Java (EL2009)
Jython: Python para la plataforma Java (EL2009)Leonardo Soto
 
Jython: Python para la plataforma Java (JRSL 09)
Jython: Python para la plataforma Java (JRSL 09)Jython: Python para la plataforma Java (JRSL 09)
Jython: Python para la plataforma Java (JRSL 09)Leonardo Soto
 
20160227 Granma
20160227 Granma20160227 Granma
20160227 GranmaSharon Liu
 
Bindings: the zen of montage
Bindings: the zen of montageBindings: the zen of montage
Bindings: the zen of montageKris Kowal
 
React Native - Workshop
React Native - WorkshopReact Native - Workshop
React Native - WorkshopFellipe Chagas
 
srcArtifact.javasrcArtifact.javaclassArtifactextendsCave{pub.docx
srcArtifact.javasrcArtifact.javaclassArtifactextendsCave{pub.docxsrcArtifact.javasrcArtifact.javaclassArtifactextendsCave{pub.docx
srcArtifact.javasrcArtifact.javaclassArtifactextendsCave{pub.docxwhitneyleman54422
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring CanvasKevin Hoyt
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientBin Shao
 
Why is crud a bad idea - focus on real scenarios
Why is crud a bad idea - focus on real scenariosWhy is crud a bad idea - focus on real scenarios
Why is crud a bad idea - focus on real scenariosDivante
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ EtsyNishan Subedi
 
Your code sucks, let's fix it - DPC UnCon
Your code sucks, let's fix it - DPC UnConYour code sucks, let's fix it - DPC UnCon
Your code sucks, let's fix it - DPC UnConRafael Dohms
 
Fun with flutter animations - Divyanshu Bhargava, GoHighLevel
Fun with flutter animations - Divyanshu Bhargava, GoHighLevelFun with flutter animations - Divyanshu Bhargava, GoHighLevel
Fun with flutter animations - Divyanshu Bhargava, GoHighLevelDroidConTLV
 
CoffeeScript
CoffeeScriptCoffeeScript
CoffeeScriptNone
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScriptersgerbille
 
Building mobile web apps with Mobello
Building mobile web apps with MobelloBuilding mobile web apps with Mobello
Building mobile web apps with MobelloJeong-Geun Kim
 

Similar to javascript Model- Render & canvas sample (20)

The Canvas API for Rubyists
The Canvas API for RubyistsThe Canvas API for Rubyists
The Canvas API for Rubyists
 
Jython: Python para la plataforma Java (EL2009)
Jython: Python para la plataforma Java (EL2009)Jython: Python para la plataforma Java (EL2009)
Jython: Python para la plataforma Java (EL2009)
 
Jython: Python para la plataforma Java (JRSL 09)
Jython: Python para la plataforma Java (JRSL 09)Jython: Python para la plataforma Java (JRSL 09)
Jython: Python para la plataforma Java (JRSL 09)
 
20160227 Granma
20160227 Granma20160227 Granma
20160227 Granma
 
J slider
J sliderJ slider
J slider
 
Bindings: the zen of montage
Bindings: the zen of montageBindings: the zen of montage
Bindings: the zen of montage
 
React Native - Workshop
React Native - WorkshopReact Native - Workshop
React Native - Workshop
 
ddd+scala
ddd+scaladdd+scala
ddd+scala
 
srcArtifact.javasrcArtifact.javaclassArtifactextendsCave{pub.docx
srcArtifact.javasrcArtifact.javaclassArtifactextendsCave{pub.docxsrcArtifact.javasrcArtifact.javaclassArtifactextendsCave{pub.docx
srcArtifact.javasrcArtifact.javaclassArtifactextendsCave{pub.docx
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring Canvas
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
 
Why is crud a bad idea - focus on real scenarios
Why is crud a bad idea - focus on real scenariosWhy is crud a bad idea - focus on real scenarios
Why is crud a bad idea - focus on real scenarios
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy
 
Bacbkone js
Bacbkone jsBacbkone js
Bacbkone js
 
Your code sucks, let's fix it - DPC UnCon
Your code sucks, let's fix it - DPC UnConYour code sucks, let's fix it - DPC UnCon
Your code sucks, let's fix it - DPC UnCon
 
Fun with flutter animations - Divyanshu Bhargava, GoHighLevel
Fun with flutter animations - Divyanshu Bhargava, GoHighLevelFun with flutter animations - Divyanshu Bhargava, GoHighLevel
Fun with flutter animations - Divyanshu Bhargava, GoHighLevel
 
CoffeeScript
CoffeeScriptCoffeeScript
CoffeeScript
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScripters
 
ES6 Overview
ES6 OverviewES6 Overview
ES6 Overview
 
Building mobile web apps with Mobello
Building mobile web apps with MobelloBuilding mobile web apps with Mobello
Building mobile web apps with Mobello
 

Recently uploaded

Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...DianaGray10
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr TsapFwdays
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...ISPMAIndia
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura RochniakFwdays
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfSafe Software
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewAshraf Fouad
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Product School
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIEDanBrown980551
 
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions..."How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...Fwdays
 
Roundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfRoundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfMostafa Higazy
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsInflectra
 
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro KozhevinFwdays
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeJosh Gellers
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, TripadvisorProduct School
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxNeo4j
 
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptxGraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptxNeo4j
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Product School
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 

Recently uploaded (20)

Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book Review
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
 
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIE
 
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions..."How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
 
Roundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfRoundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdf
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
 
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human Justice
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
 
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptxGraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 

javascript Model- Render & canvas sample

  • 1. S53 #3 3-1 MVC, Model - Render 3-2 Canvas 3-3 Model 3-4 Render 3-5 Child 3-6 Event 2012.10.31 20:30 ~ 22:30
  • 2. Model, View, Controller Model - Render Model Model Data, Business Logic Data, Business Logic Render Controller Handler, Adapter View View Controller UI, Present
  • 3. Canvas #1 PixelMap Array = [r,g,b,a, r,g,b,a, ...] context.fillRect( 0, 0, 2, 1 ); [0,0,0,0xff, 0,0,0,0xff, ...] context.lineTo( 2, 0 ); context.stroke(); [0,0,0,0xff, 0,0,0,0xff, ...]
  • 4. Canvas #2 State 1 State 2 State 3 lineWidth lineWidth lineWidth lineCap context.save() lineCap context.save() lineCap strokeStyle strokeStyle strokeStyle fillStyle fillStyle fillStyle font font font textBaseline textBaseline textBaseline textAlign textAlign textAlign translate translate translate context.restore() context.restore() . . . . . . . . .
  • 5. Model Canvas Children context child 1 child 2 child 3 state state state width, height ... draw draw draw isUpdated etc etc etc function Model( $width, $height ){ Model.prototype.update = function(){ var canvas, context; this.isUpdated = false; canvas = document.createElement( 'canvas' ); }; canvas.width = $width; Model.prototype.setSize = function( $width, $height ){ canvas.height = $height; this.canvas.width = this.width = $width; context = canvas.getContext( '2d' ); this.canvas.height = this.height = $height; this.canvas = canvas; }; this.width = $width; Model.prototype.addChild = function( $child ){ this.height = $height; $child.parent = this; this.context = context; this.children.push( $child ); this.children = []; }; this.isUpdated = true; Model.prototype.removeChild = function( $child ){ } this.children.splice( this.children.indexOf( $child ), 1 ); }; Model.prototype.getIndex = function( $child ){ var model = new Model( 500, 500 ); return this.children.indexOf( $child ); var stage = document.getElementById('stage'); }; stage.appendChild( model.canvas ); Model.prototype.swapIndex = function( $from, $to ){ var to = this.children[$to]; model.addChild( new Child(...) ); this.children[$to] = this.children[$from]; this.children[$from] = to; setInterval( model.render, 17 ); }
  • 6. Render ! isUpdated Model.prototype.render = function(){ context.clearRect(); var i, j; if( this.isUpdated ) return; Loop Children this.context.clearRect( 0, 0, this.width, this.height ); for( i = 0, j = this.children.length ; i < j ; i++ ){ context.save(); this.context.save(); this.children[i].render( this.context ); children[i].render( context ); this.context.restore(); } context.restore(); this.isUpdated = true; } isUpdated = true;
  • 7. Child function Child( $image ){ Child.prototype.setAttribute = function( $attr, $val ){ this.image = $image; if( this[$attr] === undefined ) return; this.width = image.width; this[$attr] = $val; this.height = image.height; this.parent.update(); this.x = 0; }; this.y = 0; Child.prototype.render = function( $context ){ this.rotation = 0; $context.translate( this.x, this.y ); this.parent = null; if( this.rotation ){ } $context.rotate( toRadian * this.rotation ); } var img, child; $context.drawImage( img = new Image; this.image, 0, 0, this.width, this.height img.src = 'test.png'; ); img.onload = function(){ }; child = new Child( img ); child.setAttribute( 'x', 30 ); //toRadian = 2 * pi / 360 child.setAttribute( 'y', 30 ); child.setAttribute( 'rotation', 90 ); model.addChild( child ); };
  • 8. Event canvas.addEventListener( 'click', controller ) function Child( $image ){ ... function controller( $e ){ this.click = []; var i, j; } for( i = 0, j = model.children ; i < j ; i++ ){ model.children[i].click( $e ); Child.prototype.addEventListener = function( $type, $listener ){ } if( this[$type] === undefined ) return; } this[$attr].push( $listener ); }; Child.prototype.click = function( $e ){ var i, j, x, y; if( this.x < $e.localX && $e. localX < this.x + this.width && this.y < $e.localY && $e. localY < this.y + this.height ){ $e.localX -= this.x; $e.localY -= this.y; for( i = 0, j = this.click ; i < j ; i++ ){ this.chick[i]( $e ); } child.addEventListener( 'click', function( $e ){ } alert( $e.localX + ":" + $e.localY ); }; };