{"id":25687160,"url":"https://github.com/holyshared/imagedrawer","last_synced_at":"2025-04-23T23:44:27.422Z","repository":{"id":986461,"uuid":"791206","full_name":"holyshared/ImageDrawer","owner":"holyshared","description":"API that draws to the canvas in the image is offered.","archived":false,"fork":false,"pushed_at":"2010-10-14T15:04:48.000Z","size":835,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-21T17:58:37.089Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://sharedhat.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/holyshared.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2010-07-22T15:44:13.000Z","updated_at":"2021-01-23T07:19:36.000Z","dependencies_parsed_at":"2022-08-16T11:45:11.435Z","dependency_job_id":null,"html_url":"https://github.com/holyshared/ImageDrawer","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holyshared%2FImageDrawer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holyshared%2FImageDrawer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holyshared%2FImageDrawer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holyshared%2FImageDrawer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/holyshared","download_url":"https://codeload.github.com/holyshared/ImageDrawer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250535055,"owners_count":21446504,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-24T20:08:16.034Z","updated_at":"2025-04-23T23:44:27.160Z","avatar_url":"https://github.com/holyshared.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ImageDrawer\n=========================\n\nThis plug-in draws in the image by using various animations.\nIt is assumed to build it in the slide show and the image gallery, etc. and is developed.\n\nImageDrawer Project\n[http://github.com/holyshared/ImageDrawer](http://github.com/holyshared/ImageDrawer)\n\n![ImageDrawer.Grid](http://holyshared.github.com/ImageDrawer/screenshot1.jpg)\n\nHow to Use\n------------------------------------------------------\n\nPlease see the following about use.\n\n### ImageDrawer.Grid\n\n#### Step.1 HTML\n\nFirst of all, the canvas element is described.\nThe content is as follows.\n\n\t#HTML\n\t\u003ccanvas id=\"myCanvas\"\u003e\u003c/canvas\u003e\n\n#### Step.2 Javascript\n\nThe following describe javascript. \nThe canvas is specified with setCanvas().\nAnd, the image where it draws with setImage() is specified. \n\nPlease use the read image.\n\n\t#JS\n\tvar myImage = new Image();\n\tmyImage.src = \"images/draw-image.jpg\";\n\tmyImage.onload  = function() {\n\n\t\tvar myCanvas = document.id(\"myCanvas\");\n\t\tvar drawer = new ImageDrawer.Grid({\n\t\t\t'height': 55, \n\t\t\t'width': 65,\n\t\t\t'transition': 'expo:in:out',\n\t\t\t'onDrawStart': function() {\n\t\t\t\t//image drawing start\n\t\t\t\tlog.set(\"html\", \"Start\");\n\t\t\t},\n\t\t\t'onDrawComplete': function() {\n\t\t\t\t//image drawing complete\n\t\t\t\tlog.set(\"html\", \"Complete\");\n\t\t\t}\n\t\t});\n\t\tdrawer.setCanvas(myCanvas)\n\t\tdrawer.setImage(myImage);\n\n\t\t//drawing a image\n\t\tdrawer.drawLeft();\n\t}\n\nor \n\n\t#JS\n\tvar myImage = new Image();\n\tmyImage.src = \"images/draw-image.jpg\";\n\tmyImage.onload  = function() {\n\n\t\tvar myCanvas = document.id(\"myCanvas\");\n\t\tvar drawer = new ImageDrawer.Grid({\n\t\t\t'canvas': myCanvas, \n\t\t\t'source': myImage, \n\t\t\t'height': 55, \n\t\t\t'width': 65,\n\t\t\t'transition': 'expo:in:out',\n\t\t\t'onDrawStart': function() {\n\t\t\t\t//image drawing start\n\t\t\t\tlog.set(\"html\", \"Start\");\n\t\t\t},\n\t\t\t'onDrawComplete': function() {\n\t\t\t\t//image drawing complete\n\t\t\t\tlog.set(\"html\", \"Complete\");\n\t\t\t}\n\t\t});\n\t\t//drawing a image\n\t\tdrawer.drawLeft();\n\t}\n\n#### Options\n\nAll options have default values assigned, hence are optional.\n\n* **canvas**: (element) Canvas element where it draws.\n* **source**: (element/string) Image where it draws.\n* **gridHeight**: (int) Height of divided panel.\n* **gridWidth**: (int) Width of divided panel.\n* **interval**: (int) Interval when image is switched.\n* **transition**: (string) Transition of animation. Default is expo:in:out.\n* **duration**: (int) duration of animation.\n* **onDrawStart**: When drawing begins, this event is generated.\n* **onDrawComplete**: When drawing is completed, this event is generated.\n\n\n### ImageDrawer.Expand\n\n#### Step.1 HTML\n\nFirst of all, the canvas element is described.\nThe content is as follows.\n\n\t#HTML\n\t\u003ccanvas id=\"myCanvas\"\u003e\u003c/canvas\u003e\n\n#### Step.2 Javascript\n\nThe following describe javascript. \nThe canvas is specified with setCanvas().\nAnd, the image where it draws with setImage() is specified. \n\nPlease use the read image.\n\n\t#JS\n\tvar myImage = new Image();\n\tmyImage.src = \"images/draw-image.jpg\";\n\tmyImage.onload  = function() {\n\n\t\tvar myCanvas = document.id(\"myCanvas\");\n\t\tvar drawer = new ImageDrawer.Expand({\n\t\t\t'width': 65,\n\t\t\t'transition': 'expo:in:out',\n\t\t\t'onDrawStart': function() {\n\t\t\t\t//image drawing start\n\t\t\t\tlog.set(\"html\", \"Start\");\n\t\t\t},\n\t\t\t'onDrawComplete': function() {\n\t\t\t\t//image drawing complete\n\t\t\t\tlog.set(\"html\", \"Complete\");\n\t\t\t}\n\t\t});\n\t\tdrawer.setCanvas(myCanvas)\n\t\tdrawer.setImage(myImage);\n\n\t\t//drawing a image\n\t\tdrawer.drawLeft();\n\t}\n\nor \n\n\t#JS\n\tvar myImage = new Image();\n\tmyImage.src = \"images/draw-image.jpg\";\n\tmyImage.onload  = function() {\n\n\t\tvar myCanvas = document.id(\"myCanvas\");\n\t\tvar drawer = new ImageDrawer.Expand({\n\t\t\t'canvas': myCanvas, \n\t\t\t'source': myImage, \n\t\t\t'width': 65,\n\t\t\t'transition': 'expo:in:out',\n\t\t\t'onDrawStart': function() {\n\t\t\t\t//image drawing start\n\t\t\t\tlog.set(\"html\", \"Start\");\n\t\t\t},\n\t\t\t'onDrawComplete': function() {\n\t\t\t\t//image drawing complete\n\t\t\t\tlog.set(\"html\", \"Complete\");\n\t\t\t}\n\t\t});\n\t\t//drawing a image\n\t\tdrawer.drawLeft();\n\t}\n\n\n#### Options\n\nAll options have default values assigned, hence are optional.\n\n* **canvas**: (element) Canvas element where it draws.\n* **source**: (element/string) Image where it draws.\n* **slideWidth**: (int) Width of slide.\n* **transition**: (string) Transition of animation. Default is expo:in.\n* **interval**: (int) Interval when image is switched.\n* **duration**: (int) duration of animation.\n* **onDrawStart**: When drawing begins, this event is generated.\n* **onDrawComplete**: When drawing is completed, this event is generated.\n\n\nScreenshots\n------------------------------------------------------\n![ImageDrawer.Expand Top](http://holyshared.github.com/ImageDrawer/screenshot2.jpg)\n![ImageDrawer.Expand Right](http://holyshared.github.com/ImageDrawer/screenshot3.jpg)\n![ImageDrawer.Expand Bottom](http://holyshared.github.com/ImageDrawer/screenshot4.jpg)\n\nLicense\n------------------------------------------------------\n\nThe MIT License\n[http://www.opensource.org/licenses/mit-license.php](http://www.opensource.org/licenses/mit-license.php \"The MIT License\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholyshared%2Fimagedrawer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fholyshared%2Fimagedrawer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholyshared%2Fimagedrawer/lists"}