{"action":"created","issue":{"url":"https://api.github.com/repos/koggdal/ocanvas/issues/114","labels_url":"https://api.github.com/repos/koggdal/ocanvas/issues/114/labels{/name}","comments_url":"https://api.github.com/repos/koggdal/ocanvas/issues/114/comments","events_url":"https://api.github.com/repos/koggdal/ocanvas/issues/114/events","html_url":"https://github.com/koggdal/ocanvas/pull/114","id":101317709,"number":114,"title":"Added clipping feature","user":{"login":"nestorrente","id":9889025,"avatar_url":"https://avatars.githubusercontent.com/u/9889025?v=3","gravatar_id":"","url":"https://api.github.com/users/nestorrente","html_url":"https://github.com/nestorrente","followers_url":"https://api.github.com/users/nestorrente/followers","following_url":"https://api.github.com/users/nestorrente/following{/other_user}","gists_url":"https://api.github.com/users/nestorrente/gists{/gist_id}","starred_url":"https://api.github.com/users/nestorrente/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nestorrente/subscriptions","organizations_url":"https://api.github.com/users/nestorrente/orgs","repos_url":"https://api.github.com/users/nestorrente/repos","events_url":"https://api.github.com/users/nestorrente/events{/privacy}","received_events_url":"https://api.github.com/users/nestorrente/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-08-17T01:40:18Z","updated_at":"2015-08-19T22:38:40Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/koggdal/ocanvas/pulls/114","html_url":"https://github.com/koggdal/ocanvas/pull/114","diff_url":"https://github.com/koggdal/ocanvas/pull/114.diff","patch_url":"https://github.com/koggdal/ocanvas/pull/114.patch"},"body":"Now an object can \"clip\" its childs into its shape.\r\n\r\nBefore this change, the drawObject function restored the canvas before draw object's children. In that way, clipping feature was not possible.\r\n\r\nInstead of restoring canvas and making again all parent's transformations, now the canvas is restored after children were drawn. This allows us to use the clip() function before draw the object's children.\r\n\r\nI realized that the fillRect() function doesn't work fine with clip() -it paints the object above its children. That's the reason why I wrote the function fillRectClipping. This function executes a rect() then a fill() instead of a fillRect(). Using rect()+fill(), the object is painted below its children as expected.\r\n\r\nNow the trick begins: when an object has a \"clipChildren\" property with a truthly value, the following happens:\r\n1. canvas.fillRect() function is replaced by fillRectClipping function (line 159).\r\n2. object's draw() function is invoked (line 160).\r\n3. canvas.fillRect() function is restored (line 161).\r\n4. canvas.clip() function is invoked (line 162).\r\n\r\nWhen \"clipChildren\" property is not defined or it has a falsy value, only \"obj.draw()\" is invoked.\r\n\r\nHere its an example of this clipping feature:\r\n\r\n![clipping_example](https://cloud.githubusercontent.com/assets/9889025/9296631/a57d6f24-4491-11e5-883f-db6b1da55608.png)\r\n"},"comment":{"url":"https://api.github.com/repos/koggdal/ocanvas/issues/comments/132811864","html_url":"https://github.com/koggdal/ocanvas/pull/114#issuecomment-132811864","issue_url":"https://api.github.com/repos/koggdal/ocanvas/issues/114","id":132811864,"user":{"login":"nestorrente","id":9889025,"avatar_url":"https://avatars.githubusercontent.com/u/9889025?v=3","gravatar_id":"","url":"https://api.github.com/users/nestorrente","html_url":"https://github.com/nestorrente","followers_url":"https://api.github.com/users/nestorrente/followers","following_url":"https://api.github.com/users/nestorrente/following{/other_user}","gists_url":"https://api.github.com/users/nestorrente/gists{/gist_id}","starred_url":"https://api.github.com/users/nestorrente/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nestorrente/subscriptions","organizations_url":"https://api.github.com/users/nestorrente/orgs","repos_url":"https://api.github.com/users/nestorrente/repos","events_url":"https://api.github.com/users/nestorrente/events{/privacy}","received_events_url":"https://api.github.com/users/nestorrente/received_events","type":"User","site_admin":false},"created_at":"2015-08-19T22:38:40Z","updated_at":"2015-08-19T22:38:40Z","body":"Well, I realized that canvas.clip() function only uses the last drawn path. In other words, it will not work with Display Objects with more than one path.\r\n\r\nWe cannot guarantee that \"clipChildren\" property will work on all Display Objects, because any programmer can create his own display object. With this in mind, I think that the best solution is setting \"clipChildren\" property as a custom property of some display objects (actually all except Line and Text).\r\n\r\nWhen another programmer wants to create a new display object including the \"clipChildren\" property, he will have the resposibility of using \"rect\", \"fill\" and \"stroke\" (instead of \"fillRect\" and \"strokeRect\") and call canvas.clip() when \"clipChildren\" is true.\r\n\r\nIf you agree with this, I will adapt all the current display objects and push a new commit."}}