Hello again Jeff.
I think I'll just put the code I'm using here. To reproduce the problem you only need to copy/paste the code and comment the preventmouseevent method. Btw, the problems only happen when you use the mouse (ie, when using touch in the simulator, there's no
need to call the preventmouseevent method).
The HTML file has the following markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MSPointerDown</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<!-- MSPointerDown references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js"></script>
</head>
<body>
<svg id="areaDesenho">
</svg>
</body>
</html>
And here's the code of the js file:
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
var retangulo = {
x: 0, y: 0, width: 0, height: 0,
obtemX: function () {
return this.width < 0 ? this.x - Math.abs(this.width) : this.x;
},
obtemY: function () {
return this.height < 0 ? this.y - Math.abs(this.height) : this.y;
},
obtemAltura: function () {
return Math.abs(this.height);
}
,
obtemLargura: function () {
return Math.abs(this.width);
},
efetuaReset: function () {
this.x = this.y = this.width = this.height = 0;
},
atualizaFigura: function (figura) {
figura.setAttributeNS(null, "x", this.obtemX());
figura.setAttributeNS(null, "y", this.obtemY());
figura.setAttributeNS(null, "width", this.obtemLargura());
figura.setAttributeNS(null, "height", this.obtemAltura());
},
log: function () {
console.log("x: " + this.x + "; y: " + this.y + " ---- width: " + this.width + "; height: " + this.height);
}
};
var app = WinJS.Application;
var area = null;
var figuraAuxiliar = null;
var pointerID = null;
app.onactivated = function (eventObject) {
area = document.getElementById("areaDesenho");
area.addEventListener("MSPointerDown", pointerDown);
area.addEventListener("MSPointerMove", pointerMove);
area.addEventListener("MSPointerUp", pointerUp);
figuraAuxiliar = inicializaFigura();
};
function inicializaFigura(tipoFigura) {
var ret = document.createElementNS("http://www.w3.org/2000/svg", "rect");
ret.setAttributeNS(null, "fill", "lightgray");
return ret;
}
function pointerDown(evt) {
console.log("in pointer down");
if (evt.pointerType === 4 && evt.button !== 1) {
return;
}
retangulo.x = evt.offsetX;
retangulo.y = evt.offsetY;
retangulo.atualizaFigura(figuraAuxiliar);
area.appendChild(figuraAuxiliar);
//evt.preventMouseEvent();//uncomment to see it working
pointerID = evt.pointerId;
evt.target.msSetPointerCapture(pointerID);
}
function pointerMove(evt) {
console.log("in pointer move");
if (evt.pointerId !== pointerID) return;
//evt.preventMouseEvent();//uncomment to see it working
retangulo.width = evt.offsetX - retangulo.x;
retangulo.height = evt.offsetY - retangulo.y;
retangulo.atualizaFigura(figuraAuxiliar);
retangulo.log();
}
function pointerUp(evt) {
console.log("in pointer up");
//evt.preventMouseEvent();//uncomment to see it working
figuraAuxiliar = inicializaFigura();
retangulo.efetuaReset();
pointerID = null;
}
app.oncheckpoint = function (eventObject) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// eventObject.setPromise().
};
app.start();
})();
thanks again.
Luis Abreu
