Programmatically rotate shapes using coordinates

2017-08-12 09:40 Loveen Dyall imported from Stackoverflow

If I have some shapes defined using arrays of coordinates e.g.

[[-30, -30], [-30, 30], [30, 30], [30, -30]]

and edges defined using:

[[0,1],[0,3],[1,2],[2,3]]

to make a square.

How do I programmatically tell the shape to rotate *at the center against an angle of 0->359 in javascript?

*Or better yet, is there a function which allows me to choose the center of rotation?

** Currently, I've managed to get the shape to circle the canvas using :

var x_rotate = Math.sin(angle * Math.PI /180);
var y_rotate = Math.cos(angle * Math.PI /180);

// for each coordinate
//add x_rotate and y_rotate if coordinate > 0 or subtract if coordinate < 0

3 answers

answered 2017-08-12 09:47 Rajesh Meena
use css transition and change transform by javascript

https://www.w3schools.com/cssref/css3_pr_transform.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

answered 2017-08-12 10:19 Oliver Ni

Here you go, rotates point x, y around point centerx, centery by degrees degrees. Returns floating values, round if you need to.

To rotate a shape, rotate all the points. Calculate the center if you need to, this does not do it.

Desmos link with x as a, y as b, centerx as p, centery as q, and degrees as s

function rotatePoint(x, y, centerx, centery, degrees) {
    var newx = (x - centerx) * Math.cos(degrees * Math.PI / 180) - (y - centery) * Math.sin(degrees * math.PI / 180) + centerx;
    var newy = (x - centerx) * Math.sin(degrees * Math.PI / 180) + (y - centery) * Math.cos(degrees * math.PI / 180) + centery;
    return [newx, newy];
}

answered 2017-08-12 10:20 Nina Scholz

You could use a formular for rotating the point around the origin.

function rotate(array, angle) {
    return array.map(function (p) {
        function r2d(a) { return a * Math.PI / 180; }
        return [
            Math.cos(r2d(angle)) * p[0] - Math.sin(r2d(angle)) * p[1],
            Math.sin(r2d(angle)) * p[0] - Math.cos(r2d(angle)) * p[1],
        ];
    });
}
console.log(rotate([[-30, -30], [-30, 30], [30, 30], [30, -30]], 45));
console.log(rotate([[-30, -30], [-30, 30], [30, 30], [30, -30]], 90));

.as-console-wrapper { max-height: 100% !important; top: 0; }

See also questions close to this topic

facing alots of bugs in making calculator in react js

hell guys i am trying to make calcultor in react js ..but i faced some problems..my problems is that when i trying to add three number it works perfectly but after that i tried to subtract a number from sum it gives my wrong ans ..every times it add it int instead of subtraction .. here is my code of state

            this.state={
                value:'0',
                firstValue:0,
                operation:'',
                previousvalue:'',
                nextvalue:'',
                counter:0,
                subcounter:0,
                showingTemporaryResult:false,
                newAnswere:'',
                updateValue:''
            }

here is code of operation function where i perfom my all calcultions...

operation(operator)
{
    console.log('operator coming',operator);

    if(operator==='+'||operator==='-')
    {
       // this.setState({operation:operator},()=>{console.log('setting immidiate state',this.state.operation)});

        if(this.state.operation === '+') {
            console.log("are u coming");
            let secondValue = parseInt(this.state.value);
            let firstValue = parseInt(this.state.firstValue);
            console.log('chcking first value ',firstValue);
            console.log('chcking second value ',secondValue);

            let sum = secondValue+firstValue;
            console.log('chcking sum value ',sum);

            this.setState({firstValue:sum,value:sum,secondValue:'',showingTemporaryResult:true},
            ()=>{console.log('first',this.state.firstValue,'second',this.state.secondValue,
            'value===',this.state.value)});
            //console.log('somthing here ');

        }
       else if(this.state.operation === '-') {
            console.log("something coming");
            let secondValue = parseInt(this.state.value);
            let firstValue = parseInt(this.state.firstValue);
            console.log('chcking first value ',this.state.firstValue);
            console.log('chcking second value ',secondValue);

            let subanswer = firstValue-secondValue;
            console.log('chcking sum value ',this.state.subanswer);

            this.setState({firstValue:subanswer,value:'',secondValue:'',showingTemporaryResult:true},
            ()=>{console.log('first',this.state.firstValue,'second',this.state.secondValue,
            'value===',this.state.value)});
            //console.log('somthing here ');

        }
        else if (this.state.operation === '') {
            let firstValue = parseInt(this.state.value);
            this.setState({firstValue});

            this.setState({value:'',operation:operator},()=>{console.log('here is operation setting',this.state.operation)});
           // console.log('or here ');
        }

    }
    else if(operator==='=')
    {
        if(this.state.counter>0)
        {
            let answer=parseInt(this.state.newAnswere)+parseInt(this.state.value);
            console.log('equal operator counter called in plus',this.state.newAnswere,'value',this.state.value);
            this.setState({value:answer});
            console.log("what is thhis value",this.state.value)
        }

       else if(this.state.subcounter>0)
        {
            let answer=parseInt(this.state.newAnswere)-parseInt(this.state.value);
            console.log('equal operator counter called in miunus',this.state.newAnswere,'value',this.state.value);
            this.setState({value:answer,});
            console.log("what is thhis value",this.state.value)
        }
        else if(this.state.operation === '+') {
            let answer = parseInt(this.state.value) + parseInt(this.state.firstValue);
            console.log('firstvalue',this.state.firstValue)
            console.log('value',this.state.value)
            console.log('answere',answer)
            this.setState({value:answer});
            this.setState({counter:1,newAnswere:answer,answer:'',operation:''},()=>{console.log('newcounter',this.state.counter,'newans',this.state.newAnswere)})
            console.log('value=',this.state.value)

        }
        else if(this.state.operation === '-') {
            let answer =  parseInt(this.state.firstValue)-parseInt(this.state.value) 
            console.log('firstvalue',this.state.firstValue)
            console.log('value',this.state.value)
            console.log('answere',answer)
            this.setState({value:answer});
            this.setState({subcounter:1,newAnswere:answer,firstValue:'',secondValue:''},()=>{console.log('newcounter',this.state.counter,'newans',this.state.newAnswere)})
            console.log('value=',this.state.value)

        }


    }



}

and this is my render function

render() {
return (
  <div className="cal">

      <input type="num" name="res" value={this.state.value} disabled style={{height:'8vh',width:'47vh',backgroundColor:'black',color:'white',fontSize:'20px'}}/><br></br>
      <input type="button" name="ac" onClick={() => this.cleardisplay()} value="Ac" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="+/-" onClick={() => this.changesign()} value="+/-" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="%" onClick={() => this.percent()}value="%" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="/" onClick={() => this.operation('/')} value='/' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>


      <input type="button" name="7" onClick={() => this.handleclick(7)} value="7" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="8" onClick={() => this.handleclick(8)} value="8" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="9" onClick={() => this.handleclick(9)} value="9" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="*" onClick={() => this.operation('*')} value='*' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>


      <input type="button" name="4"  onClick={() => this.handleclick(4)} value="4" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="5" onClick={() => this.handleclick(5)} value="5" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="6" onClick={() => this.handleclick(6)}value="6" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="-" onClick={() => this.operation('-')} value='-' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>


      <input type="button" name="1" onClick={() => this.handleclick(1)} value="1" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="2" onClick={() => this.handleclick(2)} value="2" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="3" onClick={() => this.handleclick(3)} value="3" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="+" onClick={() => this.operation('+')} value='+' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>


      <input type="button" name="0" onClick={() => this.handleclick(0)} value="0" style={{height:'5vh',width:'24vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="." onClick={() => this.dot()} value="." style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="=" onClick={() => this.operation('=')} value="=" style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>



  </div>
)
}

please solve this my problem i have to submit it after few hours .. May God Bless you all thanks

CSS3 Flex layout leaving empty space on the right

I use 4 column layout. Every div Width is 25%. Leaving empty space on the right. How to fix it?

body,html{margin:0;padding:0}.flexbox-slider{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:364px;visibility:hidden;margin:auto;padding-bottom:40px}.flexbox-slider .flexbox-slide img{position:absolute}.flexbox-slider .flexbox-slide{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-delay:0s;transition-delay:0s;width:25%;height:364px;position:relative;overflow:hidden;cursor:pointer;visibility:visible}.flexbox-slider .flexbox-slide:after{position:absolute;top:0;left:0;content:"";display:block;width:100%;height:100%;background-color:rgba(255,255,255,.6);z-index:2;opacity:0}.flexbox-slider .flexbox-slide img{osition:absolute;height:auto;width:auto;min-width:100%;min-height:100%;z-index:1}.flexbox-slider .flexbox-slide .text-block{position:absolute;left:30px;bottom:30px;max-width:400px;padding:20px;border-radius:5px;background-color:rgba(0,0,0,.6);color:#fff;z-index:4;visibility:hidden}.flexbox-slider .flexbox-slide .text-block h3{font-size:20px;font-weight:700}.flexbox-slider:hover .flexbox-slide:hover{-ms-flex-negative:0;flex-shrink:0;width:780px}.flexbox-slide .txt{z-index:89;position:absolute;bottom:-90%;left:0;width:100%;height:100%;display:block;padding:25% 50px 1px;color:#fff;transition:bottom 3s,background-color 0s;-moz-transition:bottom 3s,background-color 0s;-webkit-transition:bottom 3s,background-color 0s;-o-transition:bottom 3s,background-color 0s;-webkit-transition-property:background-color;-webkit-transition-duration:.5s;-webkit-transition-timing-function:ease}.flexslider,.slides li{height:650px}.flexbox-slide .txt span{width:85%;word-wrap:break-word;word-break:normal;display:block;margin-top:30px}.flexbox-slide p{font-size:18px;line-height:25px;color:#fff;font-weight:700}.flexbox-slide .txt:hover{bottom:-45%;background-color:rgba(0,0,0,.39)}.flexslider{position:relative;overflow:hidden;background:url(images/loading.gif) 50% no-repeat}.slides{position:relative;z-index:1}.flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center}.flex-control-nav a,.flex-control-nav li{display:inline-block;width:14px;height:14px}.flex-control-nav li{margin:0 5px;zoom:1}.flex-control-nav a{line-height:40px;overflow:hidden;background:url(images/dot.png) right 0 no-repeat;cursor:pointer}.flex-control-nav .flex-active{background-position:0 0}.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%}.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute}.flex-direction-nav li a.flex-prev{left:40px;background:url(images/prev.png) center center no-repeat}.flex-direction-nav li a.flex-next{right:40px;background:url(images/next.png) center center no-repeat}

I use 4 column layout.
Every div Width is 25%.
Leaving empty space on the right.
How to fix it?

<html>
 <head></head>
 <body>
  <div class="flexbox-slider my-flexbox-slider" style=""> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> ... 
  </div>
 </body>
</html>

How to find out what's preventing a click from happening?
I have the following link on the page:
```
<a href="/go/some/where.htm">...</a>
```
It lives among HTML that makes up a google.maps.InfoWindow box (which itself doesn't have a click event). This infobox comes up when the user moves the mouse over a mapping pin. For whatever reason, when the user clicks on a link in the infobox, it doesn't fire and I am trying to find out why.

The code base is huge and I have no idea where exactly the preventDefault or propagation is stopped. Is there an easier way? Can I hook into the event flow some way that would show me what is preventing the click?
JavaFX scrollable / drawable canvas

I am busy looking into building a personal application in JavaFX that can be used to take notes and attach images. Almost like a simple Microsoft Word which can only add, remove and move text and images on A4 pages.

The thing is I have no idea where to start. I have heard of the Canvas API to which shapes, lines, images etc. can be drawn. I figured the way to go is to make A4-sized canvas pages and draw to them. My question is how can I create a blank/starting document with A4 pages which are scrollable and zoomable? Any guidance or references to projects which done similar things would be greatly appreciated.
HTML to Image – Canvas without preview
I want to create images from HTML. I found that website where they show how it can be done: codepedia.info

Yes, it works. But you have to press a “preview button” and afterward a “download link” to save the graphic. I want users to press only one button and download the graphic directly without the preview. Also other users asked for that and the webmaster explained that it's easily possible as follows:

All you need to copy both button code into one function and comment this line $("#previewImage").append(canvas);.

There are 2 parts of javascript. Unfortunately I'm to clueless in javascript to know what to do and don't get it to run. Can somebody help please?
```
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable

$("#btn-Preview-Image").on('click', function () {
     html2canvas(element, {
     onrendered: function (canvas) {
            $("#previewImage").append(canvas);
            getCanvas = canvas;
         }
     });
});


$("#btn-Convert-Html2Image").on('click', function () {
     var imgageData = getCanvas.toDataURL("image/png");
     // Now browser starts downloading it instead of just showing it
     var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
     $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
```

Zooming in/out Canvas using ScaleGestureDetector on Android results in jumpiness of viewport (camera)

I'm developing a Flowchart drawing app and I implemented a zoom in/out by pinching mechanic using ScaleListener and onTouch function.

The problem is that when I zoom in, it does not zoom into the mid point of my two fingers, it zooms towards the corner of the screen.

Plus, like 3 out of 10 times I pinch in or out, after the scaling is done, camera (viewport, the visible area of the canvas/view) jumps to somewhere else. Somewhere close, so it's usable anyway but it feels jumpy. How can I fix that?

Here's the code I wrote:

private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        if (selectedShape != null){
            float shapeScaleFactor = detector.getScaleFactor();
            selectedShape.scale(Math.max(0.2f, Math.min(shapeScaleFactor, 1.5f)));
        } else {
            scaleFactor *= detector.getScaleFactor();
            scaleFactor = Math.max(0.1f, Math.min(scaleFactor, 1.0f));
            scaleX = detector.getFocusX();
            scaleY = detector.getFocusY();
        }
        invalidate();
        return true;
    }
}

Along with this onTouchEvent function:

public boolean onTouchEvent (MotionEvent event){
    scaleGestureDetector.setQuickScaleEnabled(true);
    scaleGestureDetector.onTouchEvent(event);
    final int action = event.getAction();

    float[] coords = new float[2];
    coords[0] = event.getX();
    coords[1] = event.getY();

    Matrix matrix = new Matrix();
    matrix.set(getMatrix());

    matrix.preTranslate(posX, posY);
    matrix.preScale(scaleFactor, scaleFactor);
    matrix.invert(matrix);
    matrix.mapPoints(coords);

    final int x = Math.round(event.getX());
    final int y = Math.round(event.getY());

    cX = Math.round(coords[0]);
    cY = Math.round(coords[1]);

    switch (action & MotionEvent.ACTION_MASK){
        case MotionEvent.ACTION_DOWN: {
            startClickTime = Calendar.getInstance().getTimeInMillis();
            lastX = x;
            lastY = y;
            break;
        }
        case MotionEvent.ACTION_MOVE: {
            if (!scaleGestureDetector.isInProgress()){
                final int dX = (x - lastX);
                final int dY = (y - lastY);
                if (selectedShape != null){
                    selectedShape.translate(Math.round(dX / scaleFactor), Math.round(dY / scaleFactor));
                } else {
                    posX += dX;
                    posY += dY;
                }
            }
            lastX = x;
            lastY = y;
            invalidate();
            break;
        }
        case MotionEvent.ACTION_UP: {
            long clickDuration = Calendar.getInstance().getTimeInMillis() - startClickTime;
            if (clickDuration < MAX_CLICK_DURATION && !scaleGestureDetector.isInProgress()){
                // Kullanıcı sadece dokundu. Nereye dokunduğuna bakılmalı.
                boolean flag = false;
                // Bir şekle dokunduysa o şekil seçili olmalı.
                for (Shape shape : shapes){
                    if (shape.contains(new Point(cX, cY))){
                        select(shape);
                        flag = true;
                    }
                }
                // Boş alana dokunuldu, önceden seçilmiş olan şekil artık seçili olmamalı.
                if (!flag){
                    if (selectedShape != null) selectedShape.setSelect(false);
                    selectedShape = null;
                }
            }
            invalidate();
        }
    }
    return true;
}

OnDraw:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    this.canvas = canvas;
    canvas.save();
    canvas.translate(posX, posY);
    canvas.scale(scaleFactor, scaleFactor);
    for (int a = -10; a < 10; a++) {
        for (int b = -10; b < 10; b++) {
            canvas.drawLine(1000 * a, -10000, 1000 * a, 10000, paint);
            canvas.drawLine(-10000, 1000 * b, 10000, 1000 * b, paint);
        }
    }

    for (Shape shape : shapes){
        shape.drawThis();
    }

    canvas.restore();
}

rotate a circle made of circles better in css or at least in javascript/jquery

I want to make rotate concentric circles made of circles (like in this image http://www.mattiabressan.it/immagini/homeorizzo-01.svg )in different directions (small circles anticlockwise and big circles clockwise). They need to have the same center and different radius. I tried doing it just using css animations, but I could use also javascript or jquery or canvas. This is my code. Thanks in advance

@charset "UTF-8";
/* CSS Document */

html {
  margin: 0;
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.circle-container1 {
  position: relative;
  width: 20em;
  height: 20em;
  border-radius: 50%;
  padding: 0;
  list-style: none;
  margin: 5em auto 0;
  -webkit-animation: rotazione 20s linear infinite;
  animation: rotazione 20s linear infinite;
}

.circle-container1 > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -3em;
  width: 6em;
  height: 6em;
  -webkit-animation: rotazione 20s linear infinite;
  animation: rotazione 20s linear infinite;    	
}

.circle-container1 > *:nth-of-type(1) {
  -webkit-transform: rotate(0deg) translate(10em) rotate(0deg);
          transform: rotate(0deg) translate(10em) rotate(0deg);
}

.circle-container1 > *:nth-of-type(2) {
  -webkit-transform: rotate(45deg) translate(10em) rotate(-45deg);
          transform: rotate(45deg) translate(10em) rotate(-45deg);
}

.circle-container1 > *:nth-of-type(3) {
  -webkit-transform: rotate(90deg) translate(10em) rotate(-90deg);
          transform: rotate(90deg) translate(10em) rotate(-90deg);
}
.circle-container1 > *:nth-of-type(4) {
  -webkit-transform: rotate(135deg) translate(10em) rotate(-135deg);
          transform: rotate(135deg) translate(10em) rotate(-135deg);
}

.circle-container1 > *:nth-of-type(5) {
  -webkit-transform: rotate(180deg) translate(10em) rotate(-180deg);
          transform: rotate(180deg) translate(10em) rotate(-180deg);
}

.circle-container1 > *:nth-of-type(6) {
  -webkit-transform: rotate(225deg) translate(10em) rotate(-225deg);
          transform: rotate(225deg) translate(10em) rotate(-225deg);
}

.circle-container1 > *:nth-of-type(7) {
  -webkit-transform: rotate(270deg) translate(10em) rotate(-270deg);
          transform: rotate(270deg) translate(10em) rotate(-270deg);
}

.circle-container1 > *:nth-of-type(8) {
  -webkit-transform: rotate(315deg) translate(10em) rotate(-315deg);
          transform: rotate(315deg) translate(10em) rotate(-315deg);
}

/**/
.circle-container2 {
  position: relative;
  width: 100em;
  height: 100em;
  border-radius: 50%;
  padding: 0;
  list-style: none;
  margin: 5em auto 0;
  -webkit-animation: rotazione 20s linear infinite;
  animation: rotazione 20s linear infinite;
}

.circle-container2 > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -3em;
  width: 6em;
  height: 6em;
  -webkit-animation: rotazione 20s linear infinite;
  animation: rotazione 20s linear infinite;	
}

.circle-container2 > *:nth-of-type(1) {
  -webkit-transform: rotate(0deg) translate(10em) rotate(0deg);
          transform: rotate(0deg) translate(10em) rotate(0deg);
}

.circle-container2 > *:nth-of-type(2) {
  -webkit-transform: rotate(45deg) translate(10em) rotate(-45deg);
          transform: rotate(45deg) translate(10em) rotate(-45deg);
}

.circle-container2 > *:nth-of-type(3) {
  -webkit-transform: rotate(90deg) translate(10em) rotate(-90deg);
          transform: rotate(90deg) translate(10em) rotate(-90deg);
}

.circle-container2 > *:nth-of-type(4) {
  -webkit-transform: rotate(135deg) translate(10em) rotate(-135deg);
          transform: rotate(135deg) translate(10em) rotate(-135deg);
}

.circle-container2 > *:nth-of-type(5) {
  -webkit-transform: rotate(180deg) translate(10em) rotate(-180deg);
          transform: rotate(180deg) translate(10em) rotate(-180deg);
}

.circle-container2 > *:nth-of-type(6) {
  -webkit-transform: rotate(225deg) translate(10em) rotate(-225deg);
          transform: rotate(225deg) translate(10em) rotate(-225deg);
}

.circle-container2 > *:nth-of-type(7) {
  -webkit-transform: rotate(270deg) translate(10em) rotate(-270deg);
          transform: rotate(270deg) translate(10em) rotate(-270deg);
}
.circle-container2 > *:nth-of-type(8) {
  -webkit-transform: rotate(315deg) translate(10em) rotate(-315deg);
          transform: rotate(315deg) translate(10em) rotate(-315deg);
}

.circle-container1 .cerchiopiccolo {
	width: 30px;
	height: 30px;
	background-color: blue;
	border-radius: 100%;
    display: block;
    max-width: 100%;
    transition: .15s;
}

.circle-container2 .cerchiogrande {	
	width: 100px;
	height: 100px;
	background-color: purple;
	border-radius: 100%;
	display: block;
    max-width: 100%;
    transition: .15s;
}

@-webkit-keyframes rotazione {
  100% { 
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes rotazione {
  100% { 
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes rotazione {
 100% { 
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotazione {
 100% { 
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Documento senza titolo</title>
        <link rel="stylesheet" type="text/css" href="animazionehome.css">
    </head>
    <body>
        <ul class="circle-container1">
            <li><div class="cerchiopiccolo"></div></li> 
            <li><div class="cerchiopiccolo"></div></li>  
            <li><div class="cerchiopiccolo"></div></li>  
            <li><div class="cerchiopiccolo"></div></li>  
            <li><div class="cerchiopiccolo"></div></li> 
            <li><div class="cerchiopiccolo"></div></li>  
            <li><div class="cerchiopiccolo"></div></li> 
            <li><div class="cerchiopiccolo"></div></li>
        </ul>

        <ul class="circle-container2">
            <li><div class="cerchiogrande"></div></li>
            <li><div class="cerchiogrande"></div></li>
            <li><div class="cerchiogrande"></div></li>
            <li><div class="cerchiogrande"></div></li>
            <li><div class="cerchiogrande"></div></li>
            <li><div class="cerchiogrande"></div></li>
            <li><div class="cerchiogrande"></div></li>
            <li><div class="cerchiogrande"></div></li>
        </ul>
    </body>
</html>

What's wrong with image rotation code?

The image rotates with code below, but wrong, some black dots appears on original image. I believe it's something with rotation code. Any solution? Thanks. The image dimensions is 32x32 pixels loaded on center of screen (320x240).

public class RendPanel extends JPanel {

    private static final long serialVersionUID = 1L;

    int widthe  = 320;
    int heighte = 240;

    double angle = Math.toRadians(220);
    double sin = Math.sin(angle);
    double cos = Math.cos(angle);
    double x0 = 0.5 * (widthe  - 1);     // point to rotate about
    double y0 = 0.5 * (heighte - 1);     // center of image

    public static BufferedImage fbuffer;
    public RendPanel(int width, int height) {
        fbuffer = new BufferedImage(320, 240, BufferedImage.TYPE_INT_RGB);

        BufferedImage in = null;
        try { in = ImageIO.read(new File("square.png")); } //32x32 square .png
        catch (IOException e) { e.printStackTrace(); }

        for (int i = 0; i < in.getWidth(); i++) {
            for (int j = 0; j < in.getHeight(); j++) {
                fbuffer.setRGB(i + (320 / 2) - 16, j + (240 / 2) - 16, in.getRGB(i, j));
            }
        }

        BufferedImage neww = new BufferedImage(320, 240, BufferedImage.TYPE_INT_RGB);

        for (int x = 0; x < widthe; x++) {
            for (int y = 0; y < heighte; y++) {
                if(x >= x0 - 32 && x <= x0 + 32 && y >= y0 - 32 && y <= y0 + 32){
                    double a = x - x0;
                    double b = y - y0;
                    int xx = (int) (+a * cos - b * sin + x0);
                    int yy = (int) (+a * sin + b * cos + y0);

                    // plot pixel (x, y) the same color as (xx, yy) if it's in bounds
                    if (xx >= 0 && xx < width && yy >= 0 && yy < height) {
                        neww.setRGB(xx, yy, fbuffer.getRGB(x, y));
                    }
                }
            }
        }

        fbuffer = neww;
        repaint();

        setPreferredSize(new Dimension(width, height));
    }

    protected void paintComponent(Graphics g) {
        super.paintComponent(g);

        g.drawImage(fbuffer, 0, 0, null);
    }
}

Not able to Rotate my 3D objects

I had created one project using ARKit and SceneKit framework. In which I am working with file extension .dae, the files are locally available in my project as shown in below screenshot.

Here I had applied many gestures on this virtual object such as Tap Gesture(When I tap on camera screen, it places the virtual object there), same way Pinch Gesture and Pan Gesture. All of these gestures are working perfectly fine. Now I wanted to apply rotation gesture, for which I got stuck how to do that, also I am not getting any such available sources to achieve this.

Below is my working code so far,

import UIKit
import SceneKit
import ARKit

class ViewController: UIViewController, ARSCNViewDelegate {

    @IBOutlet var sceneView: ARSCNView!
    private var movedObject: SCNNode?
    private var hud :MBProgressHUD!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.sceneView.autoenablesDefaultLighting = true
        sceneView.delegate = self
        sceneView.showsStatistics = true
        let scene = SCNScene()
        sceneView.scene = scene

        registerGestureRecognizers()
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        // Create a session configuration
        let configuration = ARWorldTrackingConfiguration()
        configuration.planeDetection = .horizontal

        // Run the view's session
        sceneView.session.run(configuration)
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)

        // Pause the view's session
        sceneView.session.pause()
    }

    private func registerGestureRecognizers() {

        let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(tapped(recognizer:)))
        tapGestureRecognizer.numberOfTapsRequired = 1
        self.sceneView.addGestureRecognizer(tapGestureRecognizer)

        let pinchGestureRecognizer = UIPinchGestureRecognizer(target: self, action: #selector(pinched(recognizer:)))
        self.sceneView.addGestureRecognizer(pinchGestureRecognizer)

        let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(moveObject(recognizer:)))
        panGestureRecognizer.maximumNumberOfTouches = 1
        panGestureRecognizer.minimumNumberOfTouches = 1
        self.sceneView.addGestureRecognizer(panGestureRecognizer)

        let rotationGestureRecognizer = UIRotationGestureRecognizer(target: self, action: #selector(rotateObject(recognizer:)))
        self.sceneView.addGestureRecognizer(rotationGestureRecognizer)
    }

    @objc func pinched(recognizer :UIPinchGestureRecognizer) {

        if recognizer.state == .changed {

            guard let sceneView = recognizer.view as? ARSCNView else {
                return
            }
            let touch = recognizer.location(in: sceneView)
            let hitTestResults = self.sceneView.hitTest(touch, options: nil)
            if let hitTest = hitTestResults.first {
                let chairNode = hitTest.node
                let pinchScaleX = Float(recognizer.scale) * chairNode.scale.x
                let pinchScaleY = Float(recognizer.scale) * chairNode.scale.y
                let pinchScaleZ = Float(recognizer.scale) * chairNode.scale.z
                chairNode.scale = SCNVector3(pinchScaleX,pinchScaleY,pinchScaleZ)
                recognizer.scale = 1
            }
        }
    }

    @objc func moveObject(recognizer: UIPanGestureRecognizer) {
        print("Move object")
        if recognizer.state == .began {
            print("Pan state began")
            let tapPoint: CGPoint? = recognizer.location(in: sceneView)
            let result = sceneView.hitTest(tapPoint ?? CGPoint.zero, options: nil)
            if result.count == 0 {
                return
            }
            let hitResult: SCNHitTestResult? = result.first
            if (hitResult?.node.name == "free_car_1") {
                movedObject = hitResult?.node
            } else if (hitResult?.node.parent?.name == "free_car_1") {
                movedObject = hitResult?.node.parent
            }
            if (movedObject != nil) {
                print("Holding an Object")
            }
        }
        if recognizer.state == .changed {
            print("Pan State Changed")
            if (movedObject != nil) {
                let tapPoint: CGPoint? = recognizer.location(in: sceneView)
                let hitResults = sceneView.hitTest(tapPoint ?? CGPoint.zero, types: .featurePoint)
                let result: ARHitTestResult? = hitResults.last
                let matrix: SCNMatrix4 = SCNMatrix4((result?.worldTransform)!)
                //SCNMatrix4FromMat4((result?.worldTransform)!)
                let vector: SCNVector3 = SCNVector3Make(matrix.m41, matrix.m42, matrix.m43)
                movedObject?.position = vector
                print("Moving object position")
            }
        }
        if recognizer.state == .ended {
            print("Done moving object homeie")
            movedObject = nil
        }
    }

    @objc func tapped(recognizer :UITapGestureRecognizer) {

        guard let sceneView = recognizer.view as? ARSCNView else {
            return
        }
        let touch = recognizer.location(in: sceneView)
        let hitTestResults = sceneView.hitTest(touch)
        guard let hitTest = hitTestResults.first?.node else {
            let hitTestResultsWithExistingPlane = sceneView.hitTest(touch, types: .existingPlane)
            let chairScene = SCNScene(named: "ShelbyWD.dae")!
            guard let chairNode = chairScene.rootNode.childNode(withName:       "ShelbyWD", recursively: true) else {
                return
            }
            if let hitTestAvailable = hitTestResultsWithExistingPlane.first {
                chairNode.position = SCNVector3(hitTestAvailable.worldTransform.columns.3.x,hitTestAvailable.worldTransform.columns.3.y,hitTestAvailable.worldTransform.columns.3.z)
                self.sceneView.scene.rootNode.addChildNode(chairNode)
                return
            }
            return
        }
        hitTest.removeFromParentNode()
    }

    @objc func rotateObject(recognizer :UIRotationGestureRecognizer) 
    {

    }
}

Can anyone help me out to apply rotation gesture on my object? Thank you!

C# Winform Paint Application : Drawing Ellipses

public partial class Form1 : Form
{
    Point star;
    Point end;
    bool moving = false;
    Graphics g;
    public Form1()
    {
        InitializeComponent();
        star.X = -1;
        star.Y = -1;
        end.Y = -1;
        end.X = -1;
        g = Panel1.CreateGraphics();
    }
    private void Panel1_MouseDown(object sender, MouseEventArgs e)
    {
        moving = true;
        star = e.Location;
    }
    private void Panel1_MouseUp(object sender, MouseEventArgs e)
    {
        moving = false;
    }
    private void Panel1_MouseMove(object sender, MouseEventArgs e)
    {
        end = e.Location;
        if (moving)
        {
            Refresh();
            DoubleBuffered = true;
            g.FillEllipse(Brushes.Red, star.X, star.Y, (end.X - star.X), (end.Y - star.Y));
            Invalidate();
        }
    }
}

Hi. My code is upside. I draw ellipses on a panel with mouse. When button is pressed, it starts to paint. And when I stop pressing the button the ellipse gets drawed. It's all OK until here. I've got problems with drawing a new ellipse. When I try to draw a new one, other ellipse dissappears. I want it to stay because later I will add a button to delete the selected shape. I need help about that. Thank you from now.

Identify Shapes in Selection in order
Let's say that I've selected two or more shapes in an Excel tab using the mouse.

Is there a VBA command(s) to determine the shape names in the sequence in which they were selected?

Selection.count only returns the number of shapes in the selection.

Recording the macro during the shapes selection process yields
```
ActiveSheet.Shapes.Range(Array("Shape_A")).Select
ActiveSheet.Shapes.Range(Array("Shape_A", "Shape_B")).Select
```
What I need is the reverse, wherein I extract the names from the selection for use in a VBA macro.

Thanks
Drawing Shapes on a PDF with C# WinForm

I have been searching for help with this for a long time. If it's been answered here already, I cannot find it. I'm using C# on a Windows Form.

I'm trying to create a simple program that allows me to open a PDF, flatten any layers within it, and then, for each click of the mouse, draw a circle.

Centered within each circle I need to have a number, beginning with "1", and chronologically increasing to infinity (could be 1, could be 15000).

Finally, I need to be able to save, and print the final result.

There are other things I need to add, but if someone can get me started with this, I should be able to figure out the rest on my own.

I've been able to import the .pdf. However, any tut I've found for creating a transparent layer on which to draw, never allows me to see the pdf behind. Do I even need this transparent layer, or can I draw directly on the pdf? My second biggest issue figuring out is how to create the circle, with the chronologically increasing number anywhere I choose to click my mouse.

Thanks in advance for any help.

Please see the image below for what it should look like.
Android - How to get CPU usage programmatically in percent?

As in the Headline described, i search for a simple way to show my application CPU usage in a textview. How can i read the usage in percent? Its important for me to get this programmatically. Android ADB wont help me!

How can create a-scene programmatically using aframe

I'm new to js and html, I would like to get into Aframe. I want to go from declarative form to create a scene to programmatical way using js to create it :

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript - A-Frame School</title>
    <meta name="description" content="JavaScript - A-Frame School">
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

  </head>
  <body>
    <a-scene school-playground>
      <a-box  position="-1 0 -4.25" rotation="0 45 0"  color="red" ></a-box>

      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

To something like that :

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript - A-Frame School</title>
    <meta name="description" content="JavaScript - A-Frame School">
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <script>
AFRAME.registerComponent('school-playground', {

init: function () {

 var body = document.querySelector('body');
 var sceneEl = document.createElement("a-scene");
 var body = document.querySelector('body');
 sceneEl.setAttribute("embedded", true);
 sceneEl.style.height="700px";
 sceneEl.style.width="100%";
 sceneEl.setAttribute("school-playground", "");

 var myBox = document.createElement('a-box');
 myBox.setAttribute('position', {x:-1, y:0, z:-4})
 myBox.setAttribute('rotation', {x:0,y:45, z:0}
 myBox.setAttribute('color', "red");
 sceneEl.appendChild(myBox);
body.appendChild(sceneEl);
//I also tried document.body.appendChild(sceneEl);
}
});
        </script>
  </head>
  <body>

  </body>
</html>

It doesn't seem possible to do it properly. Do I need to keep the scene statically defined ?

Thanks for your help.

How to create sub domains programatically to setup emails like no-reply@cusotmername.companyname

I have a challenge that needs to create emails for my customers, for example, I have a domain called abcmail.com and am having 5 customers like cusotmer1, cusotmer2, cusotmer3, cusotmer4, cusotmer5. we are using no-reply@cusotmer1.abcmail.com whenever the customer sends an email using abcmail.com company. Right now, we are creating manually no-reply@cusotmer1.abcmail.com email for each customer. Is there any way that we can set up automatically cusotmername.abcmail.com subdomains and send email?

Thank You

Related questions

Programmatically rotate shapes using coordinates

3 answers

See also questions close to this topic