search

caleb531 / jcanvas

A jQuery plugin that makes the HTML5 canvas easy to work with.
https://projects.calebevans.me/jcanvas/
MIT License
626 stars 192 forks source link

Drag bounds not correct on text when setting baseline=top #138

Closed mmccallum closed 10 years ago

mmccallum commented 10 years ago

There seems to be an issue with where you can click when dragging text if you set the baseline to top. The bounds extend above the text and you cannot click and drag from the bottom half.

jsfiddle example: http://jsfiddle.net/QPRtm/4/

Thanks!

caleb531 commented 10 years ago

Thanks for the report. I'll work on a fix for this.

-Caleb

mmccallum commented 10 years ago

This seems to work with your changes.

I assume you included some debug code because there is an opaque square around the text now.
image

-Matt

caleb531 commented 10 years ago

Oh, gosh, I forgot to remove that. Will release a fix tomorrow.

UPDATE: I can't sleep in peace tonight with that bug in existence, so it has been squashed in the latest commit (2c6c55bab7d7ce8a82f95bf56764d7023ede0822).

-Caleb

On Jan 22, 2014, at 5:45 PM, mmccallum notifications@github.com wrote:

This seems to work with your changes.

I assume you included some debug code because there is an opaque square around the text now.

-Matt

— Reply to this email directly or view it on GitHub.

mmccallum commented 10 years ago

Thanks much! Works perfectly now! I might have another bug for you, but I need to isolate it first. It centers around scaling when the mouse is moving on the canvas.

Couple of questions that are related to dragging:

What is the best way using jcanvas to duplicate what you did with the opaque square around the text that does not effect the transparency or color of the original text?

Is there any support or planed support for other draggable properties? (like in jquery ui: http://api.jqueryui.com/draggable/) Specifically containment and grids. I have written some code in my application to do this, but was just wondering.

Thanks again! Matt

caleb531 commented 10 years ago

You can simply add a rectangle layer underneath the text layer. If you want the rectangle to drag with the text, then add them both into a group using the groups property, and make sure that group is a drag group using the dragGroups property. See the documentation on drag groups.

I haven't considered adding grid-related properties for draggable layers, but that sounds like a good idea. I will consider adding it in a future release. Containment would be a bit trickier, as jCanvas allows a number of shapes to be made draggable, and I would need to respect their shapes and boundaries.

-Caleb