[REL] Sketch tools for casters

Actually I'm apparently not smart. I had last tested it after adding LavaDraw.js into the modinfo but before quitting the game and restarting. It works fine now.

ok, glad to hear it. Hopefully I'll be posting some screenshots this weekend.

Stamp tool!

How'd you do the stamps? I might as well copy that code so I don't need to write it myself for the arrow tool.

Code:

$.sketch.tools.stamp = {
    onEvent: function(e) {
        switch (e.type) {
            case 'mousedown':
            case 'touchstart':
                this.startPainting();
                break;
            case 'mouseup':
            case 'mouseout':
            case 'mouseleave':
            case 'touchend':
            case 'touchcancel':
            this.stopPainting();
        }
        if (this.painting) {
            this.action.events.push({
                x: e.pageX - this.canvas.offset().left,
                y: e.pageY - this.canvas.offset().top,
                event: e.type
            });
            return this.redraw();
        }
    },
    draw: function(action) {
        var event, previous, _i, _len, _ref;
        this.context.lineJoin = "round";
        this.context.lineCap = "round";
        this.context.beginPath();
        this.context.moveTo(action.events[0].x, action.events[0].y);
        _ref = action.events;
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            event = _ref[_i];

            var canvas = document.getElementById('cSketchJS');
            var context = canvas.getContext('2d');
            var imageObj = new Image();
            imageObj.onload = function() {
                context.drawImage(imageObj, event.x, event.y);
            };
            imageObj.src = 'coui://ui/mods/cSketchJS/images/stamp_full.png';

            previous = event;
        }
        this.context.strokeStyle = action.color;
        this.context.lineWidth = action.size;
        return this.context.stroke();
    }
};

That was the quick two-minute way to do it, but it should probably be cleaned up a bit.

Thanks! That will help a lot, now I just need to rotate the image and stuff.

If you give me a way to change the image, that would be cool too. I could add some sort of switcher into the UI. Those arrows are still probably a bigger priority though.

These stamps are lovely. Please just make sure there are no penises.

My original discription in modinfo.js for this mod was "Adds a sketch.js layer over the game window so that casters can draw lines or dicks or whatever on the screen."

I almost forgot to change that before I shared it on GitHub.

Also, if I had a way to get their uber account name instead of just display name, I would use LavaSnake's method of getting forum pictures and import them as stamps.

That would be easy enough to do once the arrow code is done.

I can add that easily if you want.

I don't think we have access to the other player's uber name, do we? I thought you could only see their display name. This would be amazing!

Great work guys. I'll be getting practice in with it and I feel it should help add another level to commentating in the Uber tourny!

hm, true. Let me look around real quick and see.

Edit: Doesn't look like it's really possible without some way of getting the UberName.

I'm hoping to finish the arrows tomorrow. They're working quite well right now except for some edge cases on the orientation.

DONE! LavaDraw v1.0 is complete and ready for @cptconundrum to add to our mod. You can download/view it here: https://github.com/pamods/LavaSnake-s-Mods/tree/master/LavaDraw (Sketch.js Tools)

This version includes the arrow and stamp tools. The arrow works just like the normal marker except it adds an arrow head to the end after you draw it. The arrow head should face in the right direction unless it's a really short line. If you find any errors please post a screenshot. If the end of your arrow is exactly diagonal it may not look right but that's something that would require a whole lot more code to fix so I'm going to leave it as is unless that causes an issue. The stamp is an improved version of cptconundrum's stamp code that allows you to change the image by editing the value in LavaDraw.StampImg.

Yes! This is really exciting.

Did you keep the stamp placement the old way where you could drag it around before releasing the mouse button, or did you make it rotatable like you suggested instead?

The stamp tool works exactly like you had it. I just cleaned up the code and added a setting so you could switch around the image. The arrow tool actually doesn't use an image, it just draws two mini lines at the end of your line to make an arrow head. There's a lot of complex code in there to find the right direction for the arrowhead and stuff but that's the basic idea of how it works. I decided to use this way since it will now use the color and line width settings for all of the arrow instead of just the line.

And here's a screenshot of all the tools in Sketch.js and LavaDraw working so @ZaphodX and @martenus can see what we have so far:

Any comments/suggestions? Also, the UI that you see there is my testing tool, not the UI that cptconundrum is writing for the mod.

I think the question now is; what stamps do we include by default?