I wrote to you about creating a dot while typing with the pen and mousedown. Previously, it wasn't possible to create a dot with the mousedown. Now it is. However, you have to hold down the dot for a while. When typing naturally, the dot sometimes works, sometimes it doesn't. I think you have to hold down the mousedown and wait a bit. I think it's related to the time function. Can this be fixed? Can a dot be created immediately after tapping?
The dot happens on mouseup not mousedown.
And for us, it happens all the time and you don't have to hold down for a while - just down-up. Test here and see what you think now that you know it is on mouseup.
We can see if we can change it to mousedown - but the code is complex.
The example you sent actually works. My code is below, and I think there's no problem with it.
The problem is this: if the finger or mouse moves slightly during a touch, the dot isn't created. According to the current code, there won't be any sliding at all during a touch to create a dot.
Or, there will be a long slide for the dot to appear. So, the code doesn't show a problem. But sometimes there's a slight sliding during a touch. That is, the finger slips. In the example you sent, if the mouse or finger moves slightly, the dot isn't created.
pen1 = new Pen({
color:color,
penType:"line",
size:kalem_size,
spread:{min:5, max:7},
move:false, // not dragging - will not matter that much as we dispose each line we draw - but not needed
cache:false // handling the cache with blitting - so no point in doing it for each pen stroke
}).addTo();
pen1.end="round"
cizim_yeri1 = new Container();
cizim_yeri1.cache(200,0,1240,2000,1); // Cache it.
stage.addChild(cizim_yeri1)
cizim_yeri1.addChild(pen1.paper)
controller1 = new MotionController({
target:pen1,
type:"pressmove",
mousedownIncludes:[cizim_yeri1,silgiCursor], // so we can mousedown on drawing and the motioncontroller will still work
speed:70,
});
pen1.on("drawing", ()=>{
cizim_yeri1.updateCache(erase?"destination-out":"source-over");
//pen1.paper.updateCache(erase?"destination-out":"source-over");
});
pen1.on("start", ()=>{
cizim_yeri1.updateCache(erase?"destination-out":"source-over");
//pen1.paper.updateCache(erase?"destination-out":"source-over");
});
pen1.on("stop", ()=>{
if(erase==false){
cizim_yeri1.updateCache(erase?"destination-out":"source-over");
}
//cizim_yeri1.updateCache(erase?"destination-out":"source-over");
pen1.lastSegment.dispose(); // get rid of the last drawn line in the paper
});
I see. Perhaps we can look at making it work on a mousedown - running into busy times but will have a look next week. I can imagine it would be frustrating if the dot is not made.
OK. I'm temporarily using both ZIM.pen and createjs to create the point. I used createjs for the pen in the past. I'm only using the mousedown part of it with ZIM.pen. It's a temporary solution for now. I hope the problem will be resolved in the future. Would you like me to remind you in the future?
Just looking at it now. We had added the following code to the MotionController:
Where zpenX and zpenY are the original mousedown x and y. The Pen does not seem to draw on mousedown - it must draw on pressmove. So we probably should look at the Pen itself to draw on mousedown. We will look there now.
But we could also adjust the range so that it accommodates for finger or press slip.
1 Like
Thank you very much
Okay... added a penDown parameter to MotionController(). This draws a dot on mousedown but it has to be shifted at least 2 pixels which sort of shows the shift if a line is drawn. We also decreased the sensitivity on the mouseup - so that will probably draw a dot every time. You can use whichever you prefer.
Here is a screenshot of some lines drawn with the penDown:true - it does not show unless the lines are more vertical.
So use:
const pen = new Pen({size:5}).addTo();
new MotionController({target:pen, type:"pressmove", penDown:true});
Here are the lines when just using the MotionController without the penDown:true and the dots are coming in very easily on mouseup.
If I set penDown to true, it draws the point on the next click. In other words, I clicked but did not draw. I clicked somewhere else. The point at the previous click position appears on the screen.
Strange - sounds like a S.update issue - we will make sure the mousedown updates the stage, not sure why it works for us without it - it was a basic test.
Okay - added the stage update. Try ZIM - Pen Dot on Mousedown - Code Creativity for instance. Make sure to refresh cache.
Yes, it works now. Thank you very much.
I tested it on a smartboard and it works great. However, when drawing with the pen, the fan starts to run extremely loud. Is this related to the pen?
It can be - if there are lots of lines, it has to keep drawing the vectors. If there are not lots of lines, the pen itself should not be that bad.
Sorry for asking so many questions. I used to create pens with createjs. ZIM.Pen writes very well. However, I'm having some problems adapting ZIM.pen to my old applications. I need to move text up and down with the pen inside a container. Moving it isn't a problem. When I scroll, I sometimes have problems with writing. It draws a line at the top. This happens sometimes.
I solved this problem by adding the following code to createjs:
var global = stage.globalToLocal(frame.mouseX, frame.mouseY-kitapCont.y);
Are you using the MotionController? Would setting the holder property of the MotionController work?
I'm using MotionController. I looked in the docs. I couldn't find the Holder parameter.
Also, when I use it as follows, when penDown:true, it creates the point in the next move. I wonder if it's related to updateCache()? But it works in the simple example you gave: ZIM - Pen Dot on Mousedown - Code Creativity
const pen = new Pen({penType:"line", size:{min:5,max:5},
spread:{min:5, max:7},move:false,cahce:false}).addTo();
pen.end="round"
var cizim_yeri1 = new Container();
cizim_yeri1.cache(130,165,1124,600,1); // Cache it.
stage.addChild(cizim_yeri1)
cizim_yeri1.addChild(pen.paper)
var erase=false
pen.on("drawing", ()=>{
cizim_yeri1.updateCache(erase?"destination-out":"source-over");
//pen1.paper.updateCache(erase?"destination-out":"source-over");
});
pen.on("start", ()=>{
cizim_yeri1.updateCache(erase?"destination-out":"source-over");
//pen1.paper.updateCache(erase?"destination-out":"source-over");
});
pen.on("stop", ()=>{
cizim_yeri1.updateCache(erase?"destination-out":"source-over");
pen.lastSegment.dispose(); // get rid of the last drawn line in the paper
});
new MotionController({
target:pen,
type:"pressmove",
penDown:true
});
new Label("Pinch to Draw", 50, null, tin).loc(40,30)
new Button(80,80,"X").pos(40,100,LEFT,TOP).tap(()=>{
pen.clear();
cizim_yeri1.updateCache()
})
oh - sorry, the container parameter (not holder).
Probably is related to cache... try updating cache on a mousedown as well? You have a typo in cahce in your code.
Ok. Thank you. I did it without MotionController, with mousdown and stagemousemove.