? ChatDraw Extensions (Page 1) ● SmileBASIC Source Forums

Sign In

*Usernames are case-sensitive
Forgot my password
This is the development website, where we test out new features. This isn't the place you're looking for! Go here

ChatDraw Extensions

  • #1 ✎ 149 randomouscrap98 Owner Touhou Project Is Awesome! I love Touhou Project! Express Yourself Second Year My account is over 2 years old Website Gardening I like to garden! Hobbies ChatDraw lets you write your own tools now. Here's a quick guide on how to get started: The chatDraw is an object that lets you add tools. A tool is an object with a "tool" function that tells the drawer how to draw your tool thing. Here's an example of how you would add the "freehand" tool: function freehandFunction(data, context) { return CanvasUtilities.DrawSolidLine(context, data.oldX, data.oldY, data.x, data.y, data.lineWidth); } var freehandTool = new CanvasDrawerTool(freehandFunction); LocalChatDraw.getDrawer().tools["freehand"] = freehandTool; First I define the function that tells us how to draw. The "data" describes the cursor action and the "context" is what to draw on (a javascript canvas 2D context object). I use one of my library functions called DrawSolidLine to draw a line without anti-aliasing (which you MUST do for chatdraw). That function produces the bounding box of the drawn line; we return this so the chatDrawer knows what area to redraw. This is an optimization: you do NOT need to return anything from the function. If you do not, each action will simply redraw the whole canvas. LocalChatDraw is this stupid object that I might get rid of later; getDrawer() returns the drawing object that describes the chatDraw, and "tools" is an associative array of CanvasDrawerTools. The string "freehand" is just the name you want to give your tool; make sure it doesn't collide with other tools. The "data" parameter is a CursorActionData object with the following fields: action, x, y, oldX, oldY, startX, startY, onTarget, lineWidth, color "action" is a bitfield describing which actions are taking place. These are CursorAction.Start, CursorAction.End, CursorAction.Drag, CursorAction.Pan, CursorAction.Zoom, etc. You only need to worry about Start and End, as the chatDraw only sends you Drag events anyway. Some tools require a preview before finally being placed on the canvas. For instance, the line tool should only PLACE the line when it's finished; while you're holding it, it's drawing an overlay. The line tool would look like this: function lineFunction(data, context) { if(data.action & CursorActions.End) { return CanvasUtilities.DrawSolidLine(context, data.startX, data.startY, data.x, data.y, data.lineWidth); } } function lineOverlay(data, context) { return CanvasUtilities.DrawSolidLine(context, data.startX, data.startY, data.x, data.y, data.lineWidth); } var lineTool = new CanvasDrawerTool(lineTool, lineOverlay); LocalChatDraw.getDrawer().tools["line"] = lineTool; Notice that we check to see if the action is "End" before placing the line. The overlay however just always draws the line. I provide the appropriate overlay context for the overlay function, so it doesn't draw it directly onto the canvas. So, the "tool" functions describe how to actually draw the thing, and the overlay describes what to draw temporarily (which not all tools require: see freehand). Finally, you probably want to be able to use this tool. For now, just create a new button for the tool: var button = LocalChatDraw.createToolButton("🖰", "line"); var buttonArea = document.querySelectorAll("#chatdraw button-area")[1]; buttonArea.insertBefore(button, buttonArea.firstChild); The first parameter to createToolButton is the display character, the second is the tool name to select when the button is clicked. If you want the button to be able to cycle through tools like the other buttons in chatDraw, just pass arrays instead of strings like so: LocalChatDraw.createToolButton(["char1","char2"], ["tool1","tool2"]); Posted Edited by randomouscrap98
  • #2 ✎ 32 Chemicale
    First I define the function that tells us how to draw.
    but i don't want anyone telling me how to draw