Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Ti.Paint Smoothing

Just thought I'd pass this on. I forked and update the Ti.Paint module so you can use Bezier based smoothing/correction, i.e., so the you can draw curves rather that jagged lines.
I also updated it so you can open the PaintView with an image inside it. It is handy if you want to edit/erase parts of an image you have drawn and saved (with toImage()) previously.

An example would be like this:

    var paint = require("ti.paint");
    var paint_view = paint.createPaintView({
        strokeWidth : 6,
        strokeColor : '#d50000',
        zIndex : 10,
        bottom : 30,
        top : 0,
        image: '/Default.png',
        useBezierCorrection: true
    });

I popped in a pull request. But while you wait you can get a compiled version from my github repo here.

— asked November 3rd 2011 by David Bankier
  • ios
  • mobile
  • module
  • smooth
  • ti.paint
1 Comment

  • Awesome, thanks. ;)

    — commented November 3rd 2011 by Arturs Sosins

7 Answers

  • Accepted Answer

    My TiPaint fork has been updated again.

    In short here are some of the new features:

    • Smoothing now occurs as you draw as apposed to when you lift your finger.
    • There are now drawing "modes": ERASE, STRAIGHT_LINE, CURVE_LINE, CIRCLE, RECTANGLE. So you can now draw ellipses and rectangles if you like.
    • Also experimenting with dynamic width based on speed when using CURVE_LINE (very early stages).

    Please look at the example app.js as the interface with the module has changed.

    — answered December 29th 2011 by David Bankier
    permalink
    11 Comments

    • Just Added:

      • Edge blurring for CURVE_LINE mode
      • Undo

      — commented January 2nd 2012 by David Bankier

    • Thanks David.

      — commented January 2nd 2012 by Sharry Stowell

    • Any chance of developing the iOS features like undo, straight line, curve, etc of the Ti.Paint module for Android? BTW, thanks a ton for the work done on this module. It is awesome.

      — commented April 24th 2012 by Josh Magalich

    • Thanks. No plans as yet and don't really have the time at the moment. I will have a look soonish.

      — commented April 26th 2012 by David Bankier

    • Hi David, thanks for the Paint module updates. They are awesome.
      With the retina display update am I supposed to be able to save the paint view @2x.

      When using Ti.Media.saveToPhotoGallery(paintView.toImage()); the saved image is really bad quality. I am assuming it is @1x.

      — commented July 20th 2012 by Tom Hynard

    • It extends a TiUIView from which it takes the toImage function. Would need to look in the Ti SDK…

      — commented July 22nd 2012 by David Bankier

    • Hi David,
      >> dynamic width based on speed when using CURVE_LINE
      Is this implemented in the module? If so, do I need to set anything for this to work?

      Thanks.

      Srini

      — commented August 2nd 2012 by Mobile Developer

    • Have a look at the example that comes with the module.

      — commented August 2nd 2012 by David Bankier

    • I did (v 1.1 for iPhone) - but I dont see any width changes with changes in speed. Am I missing something?

      — commented August 3rd 2012 by Mobile Developer

    • If you got it from my fork then you simply use paint.strokeDynamic = true. BTW I just pushed a faster alternative TiVinci.

      — commented August 6th 2012 by David Bankier

    • Very cool. Is it possible to get touch events on the paint view e.g. when the user lifts the finger I want to get the coordinates of the screen. Any chance to achieve this?

      — commented July 4th 2013 by Muhammad Qasim

  • Hi David,

    Any chance to get a compiled copy?

    Unable to get it compiled under Windows + Android.

    Getting errors after changing all properties to windows (Ti 1.8.2):

    The constructor TiViewProxy(TiContext) is undefined

    Error within Debug UI: 
java.lang.reflect.InvocationTargetException
    — answered March 2nd 2012 by CK Ng
    permalink
    1 Comment

    • Check your Ant installation. I had same problem. Type 'ant' in you command line (Windows->Run->Cmd).

      — commented March 18th 2012 by Vitali Virulaine

  • Thanks David, added it to LearningTitanium site.

    — answered November 3rd 2011 by Sharry Stowell
    permalink
    1 Comment

    • Thanks. Nice site.

      — commented November 6th 2011 by David Bankier

  • Thanks David, it's a good update.
    I can load a image form file into the new PaintView, but can't load a Blob into the new PaintView. Can I use any way to load a Blob image to show on the new PaintView? Thank you very much!

    Sample code like this,
    var paintView = Ti.Paint.createPaintView({
    image : blob,
    top : 0,
    right : 0,
    bottom : 0,
    left : 0,
    });
    the PaintView does't show any thing.

    — answered November 15th 2011 by Tony Wu
    permalink
    6 Comments

    • What about making an image of your blob first ?

      var filename = Titanium.Filesystem.applicationDataDirectory + "/image.jpg";
img = Titanium.Filesystem.getFile(filename);
img.write( blob );

Ti.Paint.createPaintView({ 
    image : img, 
    top : 0, 
    right : 0, 
    bottom : 0, 
    left : 0 
});

      — commented November 15th 2011 by Chris Magnussen

    • Tony, use Chris' work around for the moment. I'll update the module to accept blobs when I get the chance. A little busy at the moment…

      — commented November 15th 2011 by David Bankier

    • Thanks Chris and David vary much. I have tried it. It's a good way. Thank you!

      — commented November 16th 2011 by Tony Wu

    • Hi David, great work on the module. I noticed the original Ti.Paint module had an "image" attribute but for some reason it didn't work when loading in an image. Now that I'm using yours it works perfectly. I will follow the work around above for using Blobs, but I just wondered when you'd be adding in Blob support? Cheers

      — commented January 18th 2012 by Craig Myles

    • Craig, Just added it now. Sorry for the delay - been busy. Also fixes some leaks and other bugs.
      FYI, I have started working on another paint module. The appcelerator one, which I forked uses drawInRect which is quite slow. It is not ready yet. I will still maintain the current fork that you are using.

      — commented January 19th 2012 by David Bankier

    • Hi David, thanks for the prompt reply and the prompt fix. Sorry I haven't gotten back to you sooner - I applied the new version of your code and it works like a dream. Thank you. I'll keep an eye out for the new module you are working on - will you post details of it on this thread? Cheers, Craig

      — commented January 29th 2012 by Craig Myles

  • Hi, is it possible to have a compiled version of TiVinci? I tried to do it myself but I always get a lot of errors (No module named tools for instance).

    — answered November 15th 2012 by Fabio Chelly
    permalink
    1 Comment

    • the compiled module is in the "Downloads" section of the repo.

      — commented November 19th 2012 by David Bankier

  • Thanks again for this plugin. It works perfectly for my app. By the way, the ellipse is extremely slow on retina screens. Is it possible to improve it?

    And I would like to add a "text" tool to insert some text on the painter canvas. Is there a way to transfer some label content into the paint canvas (through the .toImage(à methid for instance) ?

    — answered April 16th 2013 by Fabio Chelly
    permalink
    3 Comments

    • I can't help you with text, but have a look at TiVinci for faster rendering.

      — commented April 16th 2013 by David Bankier

    • I'm using TiVinci and even if it is faster than TiPaint, it's still slow with ellipses.
      About the text tool, I was just asking if there is a way to "transfer" a label image blob (created with label.toImage() ) to the canvas so it is possible to erase parts of it like the rest of the drawing.

      — commented April 17th 2013 by Fabio Chelly

    • First off, thanks for improving on Ti.Paint. I am seeing the same issue on Retina iPads in particular. Drawing shapes and more specifically the undo function seem to lag a second or two. Any suggestions on how to correct?

      — commented May 1st 2013 by Carmen Ferrara

  • Just added straight line drawing to the module.

    So if you want draw a straight line from from touchStart to touchEnd, just do the following:

    paint.straightLineMode = true;

    Binary also updated in the github repo (link above).

    — answered November 8th 2011 by David Bankier
    permalink
    3 Comments

    • David,

      i used this line for straight line ..but i am unable to draw straight line.

      paint.straightLineMode = true;

      Please give some sample code.
      Thanks in advanced

      — commented December 15th 2011 by dinesh singh

    • Have a look at the example code in the github repo here.

      Also make sure you are using v1.1 of the module.

      — commented December 15th 2011 by David Bankier

    • Hi, david,

      I am creating a drawing app with pinch and zoom. When I am doing this it draws wherever I am touching. is there any way we can disable the drawmode when doing pinch & zoom?

      — commented April 16th 2013 by rajeev raj
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.