Titanium JIRA Archive
Appcelerator Modules (MOD)

[MOD-2179] Update Ti.Paint Module to work with new 3D-Touch properties

GitHub Issuen/a
TypeNew Feature
PriorityNone
StatusIn Progress
ResolutionUnresolved
Affected Version/sn/a
Fix Version/sn/a
Componentsn/a
Labelsn/a
ReporterAngel Petkov
AssigneeAngel Petkov
Created2015-12-15T19:54:37.000+0000
Updated2016-08-21T18:19:00.000+0000

Description

Updating the Ti.Paint module to work along side the new 3D-Touch properties. Each section of the line's width is now sized properly ,depending on the force value. PR: https://github.com/appcelerator-modules/ti.paint/pull/14
 
var Paint = require('ti.paint');
var win = Ti.UI.createWindow({ backgroundColor: '#fff' });
var win2 = Ti.UI.createWindow({ backgroundColor: 'white' });

var paintView = Paint.createPaintView({
    top 			:0,
    right 			:0,
    bottom 			:80,
    left 			:0,
    strokeColor 	:'black',
    strokeAlpha 	:255,
    eraseMode 		:false
});
win.add(paintView);


var changeColor = Ti.UI.createButton({
	bottom 	:80,
	left 	:10,
	width 	:Ti.UI.SIZE,
	height 	:Ti.UI.SIZE,
	title 	:'changeColor'
});

changeColor.addEventListener("click",function(e){
	var string = "";
	var textArea = Ti.UI.createTextArea({
  		borderWidth 	: 2,
  		borderColor 	: '#bbb',
  		borderRadius 	: 5,
  		color 			: '#888',
  		font 			: {fontSize:20, fontWeight:'bold'},
  		keyboardType 	: Ti.UI.KEYBOARD_TYPE_DEFAULT,
  		returnKeyType 	: Ti.UI.RETURNKEY_GO,
  		editable 		: true
	});

	win.add(textArea);
	textArea.addEventListener("blur",function(e){
		string = e.value;
		paintView.strokeColor = string;
		win.remove(textArea);

	});
});

win.add(changeColor);


var clear = Ti.UI.createButton({
	bottom:40,
	left:140,
	width:95,
	height:30,
	title:'Clear'
});
clear.addEventListener('click', function() {
	paintView.clear();
});
win.add(clear);

var buttonStrokeAlpha = Ti.UI.createButton({
	bottom 	:70,
	right 	:10,
	width 	:100,
	height 	:30,
	title 	:'Alpha : 100%'
});

buttonStrokeAlpha.addEventListener('click', function(e) {
	paintView.strokeAlpha = 1.5;
});
win.add(buttonStrokeAlpha);

var buttonStrokeColorEraser = Ti.UI.createButton({
	bottom 	:40,
	right 	:10,
	width 	:100,
	height 	:30,
	title:'Erase : Off' });

buttonStrokeColorEraser.addEventListener('click', function(e) {
	paintView.eraseMode = (paintView.eraseMode) ? false : true;
	e.source.title = (paintView.eraseMode) ? 'Erase : On' : 'Erase : Off';
});

var width = Ti.UI.createButton({
	bottom 	:40,
	left 	:10,
	width 	:Ti.UI.SIZE,
	height 	:30,
	title 	:'setwidthModifier'
});

width.addEventListener('click', function() { paintView.widthModifier = 2; });
win.add(width);

var saveBtn = Ti.UI.createButton({
	bottom 	:70,
	left 	:140,
	width 	:95,
	height 	:30,
	title 	:'save'
});


saveBtn.addEventListener('click', function() {
    var sigImg = paintView.toImage(null,false);
    var filename = ("Test_signature.bmp");

    var label = Ti.UI.createLabel({
    	backgroundImage	: sigImg,
    	title 			: 'Click me!',
    	center 			: 10,
    	width 			: 100,
    	height			: 100,
    	borderColor 	:"black",
    	borderRadius 	:2
	});


	win2.add(label);
	win2.open();
	win.close();
});
win.add(saveBtn)
win.add(buttonStrokeColorEraser);
win.open();

Comments

No comments

JSON Source