Skip to content

Instantly share code, notes, and snippets.

@davidsheardown
Created April 15, 2022 16:36
Show Gist options
  • Save davidsheardown/bd411240266865737794c463e71a67b8 to your computer and use it in GitHub Desktop.
Save davidsheardown/bd411240266865737794c463e71a67b8 to your computer and use it in GitHub Desktop.
Simple Draggable Canvas Circle - 39 Characters in ZIMjs
const frame = new Frame("fit", 800, 600, "#EEE", "#555");
frame.on("ready", ()=>{
zog("ready from ZIM Frame"); // logs in console (F12 - choose console)
// often need below - so consider it part of the template
const stage = frame.stage;
const stageW = frame.width;
const stageH = frame.height;
// REFERENCES for ZIM at https://zimjs.com
// see https://zimjs.com/intro.html for an intro example
// see https://zimjs.com/learn.html for video and code tutorials
// see https://zimjs.com/docs.html for documentation
// CODE
// Circle centered on stage with drag code
// TIP: colors - https://zimjs.com/tips.html#COLORS
// TIP: chaining - https://zimjs.com/tips.html#CHAINING
// TIP: positioning - https://zimjs.com/tips.html#POSITION
// TIP: dragging - https://zimjs.com/tips.html#DRAG
new Circle(100, pink).center().drag(); // chaining
new Label("ZIM - drag circle...").pos(50,50).alp(.5); // position and alpha
stage.update(); // this is needed to show any changes
// DOCS FOR ITEMS USED
// http://zimjs.com/docs.html?item=circle
// http://zimjs.com/docs.html?item=center
// http://zimjs.com/docs.html?item=drag
// http://zimjs.com/docs.html?item=label
// http://zimjs.com/docs.html?item=pos
// http://zimjs.com/docs.html?item=alp
// http://zimjs.com/docs.html?item=frame
// FOOTER
// call remote script to make ZIM icon - you will not need this
createIcon();
}); // end of ready
<script src="https://zimjs.org/cdn/1.2.3/createjs_min.js"></script>
<script src="https://zimjs.org/cdn/10.7.1/zim.js"></script>
<script src="https://zimjs.org/cdn/icon5.js"></script>

Simple Draggable Canvas Circle - 39 Characters in ZIMjs

A simple (37 character) draggable circle for the Canvas! ZIM provides JavaScript conveniences, components and controls for the Canvas and is powered by CreateJS with its solid Bitmap Object Model (BOM). Code Creativity with ZIM!

A Pen by ZIM on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment